Switch to Docker-based deployment with proper FastAPI+Gradio integration

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Dockerfile

@@ -0,0 +1,12 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY app.py .
+
+EXPOSE 7860
+
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,40 +1,49 @@
 ---
-title: Fastapi Gradio Demo
-emoji: 🚀
-colorFrom: blue
-colorTo: green
+title: Gradio + FastAPI App
+emoji: 🔥
+colorFrom: indigo
+colorTo: cyan
 sdk: docker
-sdk_version: 5.38.2
 app_file: app.py
 pinned: false
 ---
 
-# FastAPI + Gradio Integration
+# Gradio + FastAPI Hybrid App
 
-This app demonstrates how to combine FastAPI and Gradio for both API and web interface functionality.
+This Hugging Face Space serves:
 
-## Features
+- ✅ Gradio UI at `/` (via `gr.Interface`)
+- ✅ JSON API at `/api` (GET request with `?a=int`)
+- ✅ CORS enabled
+- ✅ OpenAPI docs at `/docs` (not visible in HF but works locally)
 
-- **Gradio Web UI**: `/` (root) - Interactive web interface 
-- **FastAPI endpoint**: `/api?a=<number>` - Returns JSON with `a` and `b=2*a`
-- **Health check**: `/health` - App status endpoint
+## Example Usage
 
-Both use the same core computation logic.
+### API
 
-## Usage
+```bash
+curl "https://your-space.hf.space/api?a=10"
+# Returns: {"a": 10, "b": 20}
+```
 
-1. **Web Interface**: Visit the root URL for the interactive Gradio UI
-2. **API endpoint**: `GET /api?a=5` returns `{"a": 5, "b": 10}`
-3. **Health check**: `GET /health` returns app status
+### Web Interface
+
+Visit the root URL for the interactive Gradio interface.
 
 ## Local Development
 
 ```bash
 pip install -r requirements.txt
-python app.py
+uvicorn app:app --host 0.0.0.0 --port 7860
+```
+
+Or with Docker:
+
+```bash
+docker build -t gradio-fastapi .
+docker run -p 7860:7860 gradio-fastapi
 ```
 
 The app will be available at:
 - UI: http://localhost:7860/ 
 - API: http://localhost:7860/api
-- Health: http://localhost:7860/health

app.py

@@ -1,55 +1,38 @@
+from fastapi import FastAPI, Query, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import JSONResponse
 import gradio as gr
+from gradio.routes import mount_gradio_app
+
+# FastAPI app
+app = FastAPI(title="Gradio + FastAPI Hybrid App", description="UI at `/`, API at `/api`", version="1.0")
+
+# Enable CORS (for JS/frontend clients)
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # You can restrict this in prod
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
 
 # Core logic
 def compute(a: int):
     return {"a": a, "b": 2 * a}
 
-# Gradio function for UI
-def gradio_compute(a):
-    if a is None:
-        return "Please enter a number"
-    try:
-        result = compute(int(a))
-        return f"Result: a = {result['a']}, b = {result['b']}"
-    except:
-        return "Invalid input - please enter a valid number"
-
-# API function that returns JSON
-def api_compute(a):
-    try:
-        result = compute(int(a))
-        return result
-    except:
-        return {"error": "Invalid input"}
-
-# Create Gradio interface
-with gr.Blocks(title="FastAPI + Gradio Calculator") as demo:
-    gr.Markdown("# FastAPI + Gradio Calculator")
-    gr.Markdown("Enter a number to compute a and b=2*a")
-    
-    with gr.Tab("Web Interface"):
-        with gr.Row():
-            input_num = gr.Number(label="Enter number 'a'", value=5)
-            result_text = gr.Textbox(label="Result", interactive=False)
-        
-        submit_btn = gr.Button("Calculate")
-        submit_btn.click(gradio_compute, inputs=input_num, outputs=result_text)
-        input_num.submit(gradio_compute, inputs=input_num, outputs=result_text)
-        
-        gr.Examples([[5], [10], [42]], inputs=input_num)
-    
-    with gr.Tab("API"):
-        gr.Markdown("## API Usage")
-        gr.Markdown("Use the Gradio API endpoint:")
-        gr.Markdown("```\nPOST /gradio_api/call/api_compute\n```")
-        
-        api_input = gr.Number(label="Enter number for API", value=5)
-        api_output = gr.JSON(label="API Response")
-        api_btn = gr.Button("Test API")
-        api_btn.click(api_compute, inputs=api_input, outputs=api_output)
+# GET /api?a=10 → JSON
+@app.get("/api")
+def get_api(a: int = Query(..., description="Input integer")):
+    return JSONResponse(content=compute(a))
 
-# Make API function available
-demo.api_name = "api_compute"
+# Gradio UI app
+gr_app = gr.Interface(
+    fn=compute,
+    inputs=gr.Number(label="Input a"),
+    outputs="json",
+    title="Double Calculator",
+    description="Returns JSON: {'a': a, 'b': 2a}"
+)
 
-if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860)
+# Mount Gradio UI at root `/`
+app = mount_gradio_app(app, gr_app, path="/")

requirements.txt

@@ -1,3 +1,3 @@
-gradio
 fastapi
+gradio
 uvicorn