Add Gradio application components for image analysis and configuration

Author: npv2k1

.github/workflows/deploy-to-huggingface.yml

@@ -14,13 +14,13 @@ jobs:
         with:
           fetch-depth: 0
           lfs: true
-      
+
       - name: Setup Python
         uses: actions/setup-python@v4
         with:
-          python-version: '3.11'
-          cache: 'pip'
-      
+          python-version: "3.11"
+          cache: "pip"
+
       - name: Config git
         run: |
           git config --global credential.helper store
@@ -43,8 +43,8 @@ jobs:
           SPACE_NAME: ${{ secrets.SPACE_NAME }}
         run: |
           # Create repository URL
-          REPO_URL="https://huggingface.co/spaces/$HF_USERNAME/template-python"
-          
+          REPO_URL="https://huggingface.co/spaces/$HF_USERNAME/llm-image"
+
           # Add Hugging Face as a remote and push
           git remote add space $REPO_URL || git remote set-url space $REPO_URL
-          git push -f space main
+          git push -f space main

Dockerfile

@@ -32,7 +32,7 @@ ENTRYPOINT []
 
 RUN python setup.py
 
-EXPOSE 8080
+EXPOSE 7860
 # Run the FastAPI application by default
 # Uses `fastapi dev` to enable hot-reloading when the `watch` sync occurs
 # Uses `--host 0.0.0.0` to allow access from outside the container

data/image.jpg

@@ -10,7 +10,7 @@ def main() -> None:
     """Main application entry point."""
     try:
         print("Start app...")
-        import src.modules.api
+        import src.modules.gradio_app
 
     except Exception as e:
         logging.error(f"Application failed to start: {e}", exc_info=True)

main.py

@@ -1,13 +1,16 @@
 [project]
-name = "template-python"
+name = "llm-image"
 version = "0.1.0"
 description = "Add your description here"
 readme = "README.md"
 requires-python = ">=3.11"
 dependencies = [
     "fastapi[standard]>=0.115.8",
+    "gradio>=5.3.0",
     "ipykernel>=6.29.5",
+    "litellm>=1.61.13",
     "numpy>=2.2.3",
+    "openai>=1.63.2",
     "pytest>=8.3.4",
 ]
 

notebooks/notes.ipynb

@@ -0,0 +1 @@
+import src.modules.gradio_app.index

pyproject.toml

@@ -0,0 +1,7 @@
+"""Components for the Gradio application UI"""
+
+from .config_panel import create_config_panel
+from .prompt_panel import create_prompt_panel
+from .image_panel import create_image_panel
+
+__all__ = ['create_config_panel', 'create_prompt_panel', 'create_image_panel']

src/modules/gradio_app/__init__.py

@@ -0,0 +1,48 @@
+import gradio as gr
+from typing import Tuple
+
+from src.modules.gradio_app.utils.api import update_model_list
+
+def create_config_panel() -> Tuple[gr.Textbox, gr.Textbox, gr.Dropdown]:
+    """Create configuration panel with endpoint, API key and model selection"""
+    with gr.Column():
+        endpoint_url = gr.Textbox(
+            label="LiteLLM Endpoint URL",
+            placeholder="Enter your LiteLLM endpoint URL",
+        )
+        api_key = gr.Textbox(
+            label="API Key",
+            placeholder="Enter your API key",
+            type="password"
+        )
+        refresh_models = gr.Button("Refresh Models")
+        model_dropdown = gr.Dropdown(
+            label="Select Model",
+            choices=[],
+            interactive=True
+        )
+
+        # Update model list when endpoint or API key changes
+        def update_models(endpoint_url, api_key):
+            models = update_model_list(endpoint_url, api_key)
+            return gr.Dropdown(choices=models)
+        
+        refresh_models.click(
+            fn=update_models,
+            inputs=[endpoint_url, api_key],
+            outputs=model_dropdown
+        )
+        
+        # Update models automatically when endpoint or API key changes
+        endpoint_url.change(
+            fn=update_models,
+            inputs=[endpoint_url, api_key],
+            outputs=model_dropdown
+        )
+        api_key.change(
+            fn=update_models,
+            inputs=[endpoint_url, api_key],
+            outputs=model_dropdown
+        )
+
+    return endpoint_url, api_key, model_dropdown

src/modules/gradio_app/components/__init__.py

@@ -0,0 +1,20 @@
+import gradio as gr
+from typing import Tuple
+
+def create_image_panel() -> Tuple[gr.Image, gr.Button, gr.Textbox]:
+    """Create image upload and analysis panel"""
+    with gr.Row():
+        with gr.Column():
+            image_input = gr.Image(
+                label="Upload Image",
+                type="pil"
+            )
+            analyze_button = gr.Button("Analyze Image")
+            
+        with gr.Column():
+            output = gr.Textbox(
+                label="Analysis Result",
+                lines=10
+            )
+
+    return image_input, analyze_button, output

src/modules/gradio_app/components/config_panel.py

@@ -0,0 +1,45 @@
+import gradio as gr
+from typing import Tuple
+
+def create_prompt_panel() -> Tuple[gr.Textbox, gr.Textbox, gr.Slider]:
+    """Create custom prompt panel for image analysis"""
+    with gr.Column():
+        prompt_input = gr.Textbox(
+            label="Custom Prompt",
+            placeholder="Enter your prompt for image analysis...",
+            lines=3,
+            value="Please analyze this image in detail."
+        )
+        system_prompt = gr.Textbox(
+            label="System Prompt (Optional)",
+            placeholder="Enter a system prompt to guide the model...",
+            lines=2,
+            visible=False  # Hidden by default
+        )
+        with gr.Row():
+            advanced_checkbox = gr.Checkbox(
+                label="Show Advanced Options",
+                value=False
+            )
+            temperature = gr.Slider(
+                minimum=0.0,
+                maximum=2.0,
+                value=1.0,
+                step=0.1,
+                label="Temperature",
+                visible=False
+            )
+
+        def toggle_advanced(show_advanced):
+            return {
+                system_prompt: gr.update(visible=show_advanced),
+                temperature: gr.update(visible=show_advanced)
+            }
+
+        advanced_checkbox.change(
+            fn=toggle_advanced,
+            inputs=[advanced_checkbox],
+            outputs=[system_prompt, temperature]
+        )
+
+    return prompt_input, system_prompt, temperature

src/modules/gradio_app/components/image_panel.py

@@ -0,0 +1,59 @@
+import gradio as gr
+
+from src.modules.gradio_app.components.config_panel import create_config_panel
+from src.modules.gradio_app.components.prompt_panel import create_prompt_panel
+from src.modules.gradio_app.components.image_panel import create_image_panel
+from src.modules.gradio_app.utils.analysis import analyze_image
+
+def create_gradio_app():
+    """Create the main Gradio application with all components"""
+    with gr.Blocks() as app:
+        gr.Markdown("# Image Analysis with LLM")
+          # Image Analysis Panel
+        image_input, analyze_button, output = create_image_panel()
+
+        # Configuration Panel
+        with gr.Row():
+            endpoint_url, api_key, model_dropdown = create_config_panel()
+
+        # Prompt Panel
+        with gr.Row():
+            prompt_input, system_prompt, temperature = create_prompt_panel()
+
+      
+        # Connect the analyze button to the analysis function
+        analyze_button.click(
+            fn=analyze_image,
+            inputs=[
+                image_input,
+                endpoint_url,
+                api_key,
+                model_dropdown,
+                prompt_input,
+                system_prompt,
+                temperature
+            ],
+            outputs=output
+        )
+        
+    return app
+
+app = create_gradio_app()
+
+# Configure server settings for Docker deployment
+server_port = 7860  # Standard Gradio port
+server_name = "0.0.0.0"  # Allow external connections
+
+def main():
+    """Launch the Gradio application"""
+    app.launch(
+        server_name=server_name,
+        server_port=server_port,
+        share=False,  # Disable sharing as we're running in Docker
+        auth=None,    # Can be configured if authentication is needed
+        ssl_verify=False,  # Disable SSL verification for internal Docker network
+        show_error=True,
+        favicon_path=None
+    )
+
+main()

src/modules/gradio_app/components/prompt_panel.py

@@ -0,0 +1,12 @@
+"""Utility functions for the Gradio application"""
+
+from .api import get_available_models, update_model_list
+from .image import encode_image_to_base64
+from .analysis import analyze_image
+
+__all__ = [
+    'get_available_models',
+    'update_model_list',
+    'encode_image_to_base64',
+    'analyze_image'
+]

src/modules/gradio_app/index.py

@@ -0,0 +1,61 @@
+from typing import Optional
+import openai
+from .image import encode_image_to_base64
+
+def analyze_image(
+    image,
+    endpoint_url: str,
+    api_key: str,
+    selected_model: str,
+    prompt: str,
+    system_prompt: Optional[str] = None,
+    temperature: float = 1.0
+):
+    """Analyze image using LiteLLM with custom prompts"""
+    if not endpoint_url or not api_key:
+        return "Please configure both the endpoint URL and API key"
+    
+    if not selected_model:
+        return "Please select a model"
+    
+    print(f"Analyzing image with model: {selected_model}")
+    
+    try:
+        client = openai.OpenAI(
+            api_key=api_key,
+            base_url=endpoint_url 
+        )
+
+        # Convert image to base64
+        base64_image = encode_image_to_base64(image)
+        
+        # Prepare messages
+        messages = []
+        
+        # Add system prompt if provided
+        if system_prompt:
+            messages.append({
+                "role": "system",
+                "content": system_prompt
+            })
+        
+        # Add user message with image
+        messages.append({
+            "role": "user",
+            "content": [
+                {"type": "text", "text": prompt},
+                {"type": "image_url", "image_url": base64_image}
+            ]
+        })
+        
+        # Call LiteLLM with custom endpoint
+        response = client.chat.completions.create(
+            model=selected_model,
+            messages=messages,
+            temperature=temperature
+        )
+        
+        return str(response.choices[0].message.content)
+            
+    except Exception as e:
+        return f"Error analyzing image: {str(e)}"

src/modules/gradio_app/utils/__init__.py

@@ -0,0 +1,23 @@
+from typing import List
+import requests
+
+def get_available_models(endpoint_url: str, api_key: str) -> List[str]:
+    """Fetch available models from LiteLLM endpoint"""
+    try:
+        response = requests.get(
+            f"{endpoint_url.rstrip('/')}/models",
+            headers={"Authorization": f"Bearer {api_key}"}
+        )
+        if response.status_code == 200:
+            models = response.json()
+            return [model["id"] for model in models["data"]]
+        return []
+    except Exception as e:
+        print(f"Error fetching models: {e}")
+        return []
+
+def update_model_list(endpoint_url: str, api_key: str) -> List[str]:
+    """Update the model list when endpoint or API key changes"""
+    if not endpoint_url or not api_key:
+        return []
+    return get_available_models(endpoint_url, api_key)

src/modules/gradio_app/utils/analysis.py

@@ -0,0 +1,10 @@
+import base64
+from io import BytesIO
+from PIL import Image
+
+def encode_image_to_base64(image: Image.Image) -> str:
+    """Convert image to base64 string"""
+    buffered = BytesIO()
+    image.save(buffered, format="PNG")
+    img_str = base64.b64encode(buffered.getvalue()).decode()
+    return f"data:image/png;base64,{img_str}"