@yeongjaeyou/claude-code-config 0.17.0 → 0.18.0

package/.claude/skills/gradio-cv-app/SKILL.md

@@ -0,0 +1,170 @@
+---
+name: gradio-cv-app
+description: Creates professional Gradio computer vision apps. Applies a refined Editorial design based on PRITHIVSAKTHIUR style. Automatically triggered for OCR, image classification, generation, segmentation, editing, captioning, and detection app requests. Used for Gradio CV apps, computer vision demos, and image processing app creation requests.
+---
+
+# Gradio CV App Generator
+
+A skill for creating professional Gradio computer vision apps.
+Combines PRITHIVSAKTHIUR's functional patterns with Editorial design principles.
+
+## Design Principles
+
+### What to Avoid (AI Look)
+- Purple/rainbow gradients
+- Multiple mixed colors
+- Excessive animations
+- Colors commonly seen in AI demos like Steel Blue, Purple, etc.
+
+### What to Apply (Editorial Style)
+- Solid colors + single accent
+- Pretendard font (Korean support)
+- Minimal and functional UI
+- Ample whitespace and high contrast
+- Professional tool-like feel
+- Dark mode support (system preference by default)
+
+### Dark Mode Considerations
+- **Accent color**: Must use `color_accent="*secondary_500"` (emerald) instead of default primary (zinc)
+- Zinc primary causes poor tab text visibility in dark mode
+- See [refined-theme.md](references/refined-theme.md) for complete theme settings
+
+## Supported Task Types
+
+| Task | Description | Key Patterns |
+|------|-------------|--------------|
+| `ocr` | OCR/VLM multimodal app | Tabs, TextIteratorStreamer, Accordion |
+| `classify` | Image classification | gr.Interface, gr.Label |
+| `generate` | Image generation | LoRA loading, style dictionary |
+| `segment` | Segmentation | gr.AnnotatedImage |
+| `edit` | Image editing | LoRA adapter, prompts |
+| `caption` | Image captioning | VLM model, copy button |
+| `detect` | Detection (Deepfake, etc.) | Binary classification, gr.Label |
+
+## Usage
+
+When creating a Gradio CV app:
+
+1. **Identify task type**: Determine the CV task from the user request
+2. **Apply theme**: Use the RefinedTheme class from [refined-theme.md](references/refined-theme.md)
+3. **Reference templates**: Check the relevant task pattern in [task-templates.md](references/task-templates.md)
+4. **Check reference repos**: Refer to [github-references.md](references/github-references.md) if needed
+5. **Generate complete app.py**: Write ready-to-run code
+
+## Theme Mode
+
+Apps support light/dark mode with automatic system preference detection.
+
+| Mode | Description |
+|------|-------------|
+| **Auto (Default)** | Detects OS preference, saves user choice to localStorage |
+| Light | Forces light theme |
+| Dark | Forces dark theme |
+
+Implementation: Add theme toggle button using Lucide icons. See [refined-theme.md](references/refined-theme.md) for details.
+
+## Internationalization (i18n)
+
+Simple dictionary-based labels for Korean/English support.
+
+```python
+LABELS = {
+    "en": {"title": "Image Classification", "run": "Run"},
+    "ko": {"title": "이미지 분류", "run": "실행"},
+}
+```
+
+See [i18n-patterns.md](references/i18n-patterns.md) for full label dictionaries and usage patterns.
+
+## Output Requirements
+
+1. **Complete app.py file**: Ready-to-run code
+2. **requirements.txt**: Required package list
+   - `gradio>=5.50.0,<6.0` (required version range)
+   - Other necessary packages
+
+## Code Quality Standards
+
+- Use type hints
+- Error handling (use gr.Error)
+- Memory management (torch.cuda.empty_cache())
+- Apply inference mode when loading models (model.train(False))
+- Appropriate comments
+
+## Layout Best Practices
+
+### Row/Column Nesting Rules
+
+**CRITICAL**: Never nest `gr.Row` inside `gr.Row` - this causes double flex context conflicts.
+
+| Pattern | Status | Reason |
+|---------|--------|--------|
+| `Row > Column > components` | CORRECT | Clear flex hierarchy |
+| `Row > Row > components` | WRONG | Double flex context, alignment issues |
+| `Column > Row > components` | CORRECT | Standard layout pattern |
+
+**Example - Header Layout:**
+
+```python
+# CORRECT - Single Row level with direct children
+with gr.Row(elem_id="header-row"):
+    gr.Image(...)                      # Direct child
+    gr.Markdown("# Title")             # Direct child
+    gr.HTML(value=HEADER_CONTROLS_HTML)  # Use gr.HTML for multiple controls
+
+# WRONG - Nested Rows cause alignment issues
+with gr.Row(elem_id="header-row"):
+    with gr.Row(elem_id="header-left"):   # DO NOT DO THIS
+        gr.Image(...)
+        gr.Markdown(...)
+    with gr.Group(elem_id="header-controls"):  # gr.Group forces column layout!
+        gr.HTML(...)
+        gr.HTML(...)
+```
+
+### Theme Toggle Implementation
+
+**IMPORTANT**: In Gradio 5.x, `gr.Button` does NOT render HTML in the `value` parameter - it escapes HTML to text.
+
+**For SVG Icons**: Use `gr.HTML` with native `<button>` element
+**For Text Only**: Use `gr.Button` with text value (e.g., "Dark" / "Light")
+
+```python
+# CORRECT - gr.HTML for SVG icon toggle
+THEME_TOGGLE_HTML = '''
+<button id="theme-toggle" class="theme-toggle-btn" type="button">
+    <span class="icon-moon"><svg>...</svg></span>
+    <span class="icon-sun"><svg>...</svg></span>
+</button>
+'''
+gr.HTML(value=THEME_TOGGLE_HTML)
+
+# Click handler attached via demo.load() JS
+demo.load(fn=None, js=INIT_THEME_JS)  # Includes click handler
+
+# WRONG - gr.Button does NOT render HTML
+theme_btn = gr.Button(value="<span>...</span>")  # Shows escaped text, not icon!
+```
+
+### CSS Guidelines
+
+| Practice | Status | Alternative |
+|----------|--------|-------------|
+| Use CSS variables | REQUIRED | `var(--body-text-color)` |
+| Hardcoded hex colors | AVOID | Use theme variables |
+| Excessive `!important` | AVOID | Let Gradio handle defaults |
+| Manual flex layouts | MINIMIZE | Use `gr.Row`/`gr.Column` scale |
+
+## Common Execution Pattern
+
+```python
+if __name__ == "__main__":
+    demo.queue(max_size=30).launch(mcp_server=True, ssr_mode=False, show_error=True)
+```
+
+## Additional Resources
+
+- Theme code (with dark mode): [references/refined-theme.md](references/refined-theme.md)
+- Task-specific templates: [references/task-templates.md](references/task-templates.md)
+- i18n patterns (Korean/English): [references/i18n-patterns.md](references/i18n-patterns.md)
+- GitHub references: [references/github-references.md](references/github-references.md)

package/.claude/skills/gradio-cv-app/references/github-references.md

@@ -0,0 +1,134 @@
+# GitHub References
+
+Reference repositories for Gradio CV applications by PRITHIVSAKTHIUR.
+
+## Profile
+
+- **GitHub**: https://github.com/PRITHIVSAKTHIUR
+- **Hugging Face**: https://huggingface.co/prithivMLmods
+- **Specialty**: Extensive experience building Gradio apps based on Computer Vision, VLM, and Diffusion models
+
+---
+
+## Reference Repositories by Task
+
+### OCR/VLM (`ocr`)
+
+| Repository | Stars | Key Patterns |
+|-----------|-------|----------|
+| [Multimodal-OCR](https://github.com/PRITHIVSAKTHIUR/Multimodal-OCR) | 14 | Multi-model selection, streaming output, Image/Video tabs |
+| [Qwen3-VL-Outpost](https://github.com/PRITHIVSAKTHIUR/Qwen3-VL-Outpost) | 6 | PDF processing, GIF support, custom themes |
+| [Multimodal-OCR2](https://github.com/PRITHIVSAKTHIUR/Multimodal-OCR2) | 4 | Video OCR, markdown output |
+
+### Image Classification (`classify`)
+
+| Repository | Stars | Key Patterns |
+|-----------|-------|----------|
+| [deepfake-detector-model-v1](https://github.com/PRITHIVSAKTHIUR/deepfake-detector-model-v1) | 15 | gr.Interface, SiglipForImageClassification |
+| [AIorNot-SigLIP2](https://github.com/PRITHIVSAKTHIUR/AIorNot-SigLIP2) | 3 | Binary classification, gr.Label output |
+
+### Image Generation (`generate`)
+
+| Repository | Stars | Key Patterns |
+|-----------|-------|----------|
+| [FLUX-REALISM](https://github.com/PRITHIVSAKTHIUR/FLUX-REALISM) | 15 | Style dictionary, LoRA loading, dual models |
+| [Flux-LoRA-DLC](https://github.com/PRITHIVSAKTHIUR/Flux-LoRA-DLC) | 13 | 255+ LoRA collection, dynamic loading |
+| [Imagineo-4K](https://github.com/PRITHIVSAKTHIUR/Imagineo-4K) | 12 | Grid generation, filter/style combinations |
+
+### Segmentation (`segment`)
+
+| Repository | Stars | Key Patterns |
+|-----------|-------|----------|
+| [SAM3-Image-Segmentation](https://github.com/PRITHIVSAKTHIUR/SAM3-Image-Segmentation) | 2 | gr.AnnotatedImage, text prompts |
+
+### Image Editing (`edit`)
+
+| Repository | Stars | Key Patterns |
+|-----------|-------|----------|
+| [Qwen-Image-Edit-2509-LoRAs-Fast](https://github.com/PRITHIVSAKTHIUR/Qwen-Image-Edit-2509-LoRAs-Fast) | 5 | LoRA adapter selection, image editing |
+| [Magic_Eraser](https://github.com/PRITHIVSAKTHIUR/Magic_Eraser) | 15 | Streamlit canvas, inpainting |
+
+### Image Captioning (`caption`)
+
+| Repository | Stars | Key Patterns |
+|-----------|-------|----------|
+| [Florence-2-Image-Caption](https://github.com/PRITHIVSAKTHIUR/Florence-2-Image-Caption) | 6 | Model selection radio buttons, detailed captions |
+
+### Detection (`detect`)
+
+| Repository | Stars | Key Patterns |
+|-----------|-------|----------|
+| [deepfake-detector-model-v1](https://github.com/PRITHIVSAKTHIUR/deepfake-detector-model-v1) | 15 | Real/Fake binary classification |
+| [AIorNot-SigLIP2](https://github.com/PRITHIVSAKTHIUR/AIorNot-SigLIP2) | 3 | AI/Real detection |
+
+---
+
+## Additional Reference Repositories
+
+### Fine-tuning & Notebooks
+
+| Repository | Stars | Description |
+|-----------|-------|------|
+| [FineTuning-SigLIP-2](https://github.com/PRITHIVSAKTHIUR/FineTuning-SigLIP-2) | 44 | Image classification model fine-tuning notebooks |
+| [Multimodal-Outpost-Notebooks](https://github.com/PRITHIVSAKTHIUR/Multimodal-Outpost-Notebooks) | 24 | VLM implementation notebooks |
+| [OCR-ReportLab-Notebooks](https://github.com/PRITHIVSAKTHIUR/OCR-ReportLab-Notebooks) | 23 | OCR experiment notebooks |
+
+---
+
+## Key Code Patterns Summary
+
+### 1. Custom Theme Structure
+
+Common theme pattern used across all apps:
+- Inherits from `gradio.themes.Soft`
+- Custom Color definitions
+- Gradient backgrounds and buttons (original style)
+
+**Note**: This skill replaces gradients with solid colors to avoid an AI-generated aesthetic.
+
+### 2. GPU Compatibility Pattern
+
+```python
+try:
+    import spaces
+    @spaces.GPU
+    def inference(...): ...
+except ImportError:
+    def inference(...): ...
+```
+
+### 3. Streaming Output Pattern
+
+```python
+from transformers import TextIteratorStreamer
+import threading
+
+streamer = TextIteratorStreamer(tokenizer, skip_special_tokens=True)
+thread = threading.Thread(target=model.generate, kwargs={..., "streamer": streamer})
+thread.start()
+
+for text in streamer:
+    yield partial_output + text
+```
+
+### 4. Model Selection Pattern
+
+```python
+MODELS = {
+    "Model A": "path/to/model-a",
+    "Model B": "path/to/model-b",
+}
+
+model_selector = gr.Radio(list(MODELS.keys()), value="Model A", label="Select Model")
+```
+
+### 5. Example Images Pattern
+
+```python
+examples = [
+    ["examples/image1.jpg", "Prompt 1"],
+    ["examples/image2.jpg", "Prompt 2"],
+]
+
+gr.Examples(examples=examples, inputs=[image_input, prompt_input])
+```