Fix: Use gr.Interface instead of Blocks to bypass Gradio schema bug

app.py

@@ -10,6 +10,8 @@ import gradio as gr
 from transformers import AutoTokenizer, AutoModelForCausalLM, pipeline
 from PIL import Image, ImageDraw
 import numpy as np
+import base64
+from io import BytesIO
 
 # ===== DEVICE CONFIGURATION =====
 device = "cpu"
@@ -119,62 +121,66 @@ def image_fn(prompt, width, height):
                 b = int((np.sin((x + y) / 100 + seed * 0.7) * 127) + 128)
                 pixels[x, y] = (r, g, b)
         
-        return img
+        buffered = BytesIO()
+        img.save(buffered, format="PNG")
+        img_str = base64.b64encode(buffered.getvalue()).decode()
+        return f"data:image/png;base64,{img_str}"
     except Exception as e:
-        return Image.new('RGB', (256, 256), color=(255, 0, 0))
+        return f"Error: {str(e)}"
 
 
 # ===== GRADIO INTERFACE =====
 
-demo = gr.Blocks()
-
-with demo:
-    gr.Markdown("# 🤖 Lightweight AI Backend")
-    gr.Markdown("Multi-Model API running on FREE CPU tier")
-    
-    with gr.Tabs():
-        with gr.Tab("💬 Chat"):
-            with gr.Row():
-                with gr.Column():
-                    chat_input = gr.Textbox(label="Message", lines=3)
-                    chat_tokens = gr.Slider(50, 200, 150, 10, label="Max Tokens")
-                    chat_temp = gr.Slider(0.1, 1.0, 0.7, 0.1, label="Temperature")
-                    chat_btn = gr.Button("Generate")
-                with gr.Column():
-                    chat_output = gr.Textbox(label="Response", lines=10)
-            chat_btn.click(chat_fn, [chat_input, chat_tokens, chat_temp], chat_output)
-        
-        with gr.Tab("💻 Code"):
-            with gr.Row():
-                with gr.Column():
-                    code_input = gr.Textbox(label="Description", lines=3)
-                    code_tokens = gr.Slider(100, 300, 256, 20, label="Max Tokens")
-                    code_temp = gr.Slider(0.1, 1.0, 0.3, 0.1, label="Temperature")
-                    code_btn = gr.Button("Generate")
-                with gr.Column():
-                    code_output = gr.Textbox(label="Code", lines=10)
-            code_btn.click(code_fn, [code_input, code_tokens, code_temp], code_output)
-        
-        with gr.Tab("📝 Summarize"):
-            with gr.Row():
-                with gr.Column():
-                    sum_input = gr.Textbox(label="Text", lines=8)
-                    sum_length = gr.Slider(20, 150, 100, 10, label="Length")
-                    sum_btn = gr.Button("Summarize")
-                with gr.Column():
-                    sum_output = gr.Textbox(label="Summary", lines=8)
-            sum_btn.click(summarize_fn, [sum_input, sum_length], sum_output)
-        
-        with gr.Tab("🎨 Image"):
-            with gr.Row():
-                with gr.Column():
-                    img_input = gr.Textbox(label="Description", lines=3)
-                    img_width = gr.Slider(128, 256, 256, 32, label="Width")
-                    img_height = gr.Slider(128, 256, 256, 32, label="Height")
-                    img_btn = gr.Button("Generate")
-                with gr.Column():
-                    img_output = gr.Image(label="Image")
-            img_btn.click(image_fn, [img_input, img_width, img_height], img_output)
+# Create individual interfaces
+chat_demo = gr.Interface(
+    fn=chat_fn,
+    inputs=[
+        gr.Textbox(lines=3, label="Message"),
+        gr.Slider(50, 200, 150, step=10, label="Max Tokens"),
+        gr.Slider(0.1, 1.0, 0.7, step=0.1, label="Temperature")
+    ],
+    outputs=gr.Textbox(lines=10, label="Response"),
+    title="💬 Chat"
+)
+
+code_demo = gr.Interface(
+    fn=code_fn,
+    inputs=[
+        gr.Textbox(lines=3, label="Description"),
+        gr.Slider(100, 300, 256, step=20, label="Max Tokens"),
+        gr.Slider(0.1, 1.0, 0.3, step=0.1, label="Temperature")
+    ],
+    outputs=gr.Textbox(lines=10, label="Code"),
+    title="💻 Code"
+)
+
+summarize_demo = gr.Interface(
+    fn=summarize_fn,
+    inputs=[
+        gr.Textbox(lines=8, label="Text"),
+        gr.Slider(20, 150, 100, step=10, label="Summary Length")
+    ],
+    outputs=gr.Textbox(lines=8, label="Summary"),
+    title="📝 Summarize"
+)
+
+image_demo = gr.Interface(
+    fn=image_fn,
+    inputs=[
+        gr.Textbox(label="Description"),
+        gr.Slider(128, 256, 256, step=32, label="Width"),
+        gr.Slider(128, 256, 256, step=32, label="Height")
+    ],
+    outputs=gr.Textbox(label="Image (Base64)"),
+    title="🎨 Image"
+)
+
+# Create tabbed interface
+demo = gr.TabbedInterface(
+    [chat_demo, code_demo, summarize_demo, image_demo],
+    tab_names=["💬 Chat", "💻 Code", "📝 Summarize", "🎨 Image"],
+    title="🤖 Lightweight AI Backend"
+)
 
 
 # ===== INITIALIZE AND RUN =====