added logs

.gitignore

@@ -0,0 +1,3 @@
+*.gradio
+*.csv
+*.jpg

app.py

@@ -9,12 +9,16 @@ import gradio as gr
 DEVICE = "cuda" if torch.cuda.is_available() else "cpu"
 
 # Initialize processor and model
-processor = AutoProcessor.from_pretrained("HuggingFaceTB/SmolVLM-Instruct")
-model = AutoModelForVision2Seq.from_pretrained(
-    "HuggingFaceTB/SmolVLM-Instruct",
-    torch_dtype=torch.bfloat16 if DEVICE == "cuda" else torch.float32,
-    _attn_implementation="flash_attention_2" if DEVICE == "cuda" else "eager",
-).to(DEVICE)
+try:
+    processor = AutoProcessor.from_pretrained("HuggingFaceTB/SmolVLM-Instruct")
+    model = AutoModelForVision2Seq.from_pretrained(
+        "HuggingFaceTB/SmolVLM-Instruct",
+        torch_dtype=torch.bfloat16 if DEVICE == "cuda" else torch.float32,
+        _attn_implementation="flash_attention_2" if DEVICE == "cuda" else "eager",
+    ).to(DEVICE)
+except Exception as e:
+    print(f"Error loading model or processor: {str(e)}")
+    exit(1)
 
 
 # Define the function to answer questions
@@ -63,13 +67,17 @@ def answer_question(image, question):
         return f"Error: Failed to generate output. {str(e)}"
 
 
-interface = gr.Interface(
+# Create Gradio interface
+iface = gr.Interface(
     fn=answer_question,
-    inputs=["image", "text"],  # Image and text inputs
+    inputs=[
+        gr.inputs.Image(type="numpy"),
+        gr.inputs.Textbox(lines=2, placeholder="Enter your question here..."),
+    ],
     outputs="text",
-    title="SmolVLM - Vision-Language Question Answering",
-    description="Upload an image and ask a question to get an answer powered by SmolVLM.",
+    title="Image Question Answering",
+    description="Upload an image and ask a question about it.",
 )
 
 if __name__ == "__main__":
-    interface.launch()
+    iface.launch()

src/main.js

@@ -19,29 +19,38 @@ async function initializeWebGPU() {
     console.log("WebGPU initialized.");
 }
 
-// Submit the image and question to the backend
 async function submitQuestion(imageFile, question) {
     const formData = new FormData();
     formData.append("image", imageFile);
     formData.append("text", question);
 
-    const response = await fetch("/predict", {
-        method: "POST",
-        body: formData,
-    });
-
-    if (!response.ok) {
-        console.error("Failed to get a response:", response.statusText);
-        return "Error: Unable to fetch the answer.";
+    try {
+        const response = await fetch("/predict", {
+            method: "POST",
+            body: formData,
+        });
+
+        if (!response.ok) {
+            const errorText = await response.text();
+            console.error("Failed to get a response:", response.status, response.statusText, errorText);
+            return `Error: Unable to fetch the answer. Status: ${response.status}, ${response.statusText}`;
+        }
+
+        const result = await response.json();
+        return result.data[0];
+    } catch (error) {
+        console.error("Fetch error:", error);
+        return `Error: Unable to fetch the answer. ${error.message}`;
     }
-
-    const result = await response.json();
-    return result.data[0];
 }
 
 // Handle user interactions
 document.getElementById("submit-btn").addEventListener("click", async () => {
     const imageFile = document.getElementById("image-upload").files[0];
+    if (!imageFile) {
+        alert("Please upload an image.");
+        return;
+    }
     const question = document.getElementById("question").value;
 
     const answer = await submitQuestion(imageFile, question);