Add application file

app.py

@@ -1,6 +1,12 @@
 from transformers import AutoModelForCausalLM, AutoTokenizer
 from PIL import Image
 import gradio as gr
+from __future__ import annotations
+from typing import Iterable
+import gradio as gr
+from gradio.themes.base import Base
+from gradio.themes.utils import colors, fonts, sizes
+import time
 
 # Load the model and tokenizer
 model_id = "vikhyatk/moondream2"
@@ -15,62 +21,68 @@ def analyze_image_direct(image, question):
     # For demonstration, it returns a static response.
     return "This is a placeholder answer."
 
-# Define custom CSS to make the interface purple
-custom_css = """
-/* General background */
-body {
-    background-color: #6a0dad; /* Rich purple background */
-    color: #EDE7F6; /* Light purple text for contrast */
-}
-
-/* Buttons */
-button {
-    background-color: #9c27b0; /* Vibrant purple */
-    color: #FFFFFF; /* White text */
-    border: none;
-    border-radius: 5px; /* Rounded corners for buttons */
-    padding: 10px 20px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-button:hover {
-    background-color: #7b1fa2; /* Darker purple on hover */
-}
-
-/* Text inputs and text areas */
-input[type="text"], textarea {
-    background-color: #9575cd; /* Soft purple */
-    color: #FFFFFF; /* White text */
-    border: none;
-    padding: 10px;
-    border-radius: 5px; /* Rounded corners for text inputs */
-}
+class Seafoam(Base):
+    def __init__(
+        self,
+        *,
+        primary_hue: colors.Color | str = colors.emerald,
+        secondary_hue: colors.Color | str = colors.blue,
+        neutral_hue: colors.Color | str = colors.blue,
+        spacing_size: sizes.Size | str = sizes.spacing_md,
+        radius_size: sizes.Size | str = sizes.radius_md,
+        text_size: sizes.Size | str = sizes.text_lg,
+        font: fonts.Font
+        | str
+        | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("Quicksand"),
+            "ui-sans-serif",
+            "sans-serif",
+        ),
+        font_mono: fonts.Font
+        | str
+        | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("IBM Plex Mono"),
+            "ui-monospace",
+            "monospace",
+        ),
+    ):
+        super().__init__(
+            primary_hue=primary_hue,
+            secondary_hue=secondary_hue,
+            neutral_hue=neutral_hue,
+            spacing_size=spacing_size,
+            radius_size=radius_size,
+            text_size=text_size,
+            font=font,
+            font_mono=font_mono,
+        )
+        super().set(
+            body_background_fill="repeating-linear-gradient(45deg, *primary_200, *primary_200 10px, *primary_50 10px, *primary_50 20px)",
+            body_background_fill_dark="repeating-linear-gradient(45deg, *primary_800, *primary_800 10px, *primary_900 10px, *primary_900 20px)",
+            button_primary_background_fill="linear-gradient(90deg, *primary_300, *secondary_400)",
+            button_primary_background_fill_hover="linear-gradient(90deg, *primary_200, *secondary_300)",
+            button_primary_text_color="white",
+            button_primary_background_fill_dark="linear-gradient(90deg, *primary_600, *secondary_800)",
+            slider_color="*secondary_300",
+            slider_color_dark="*secondary_600",
+            block_title_text_weight="600",
+            block_border_width="3px",
+            block_shadow="*shadow_drop_lg",
+            button_shadow="*shadow_drop_lg",
+            button_large_padding="32px",
+        )
 
-/* Gradio interface container for a more centered look */
-.gradio_container {
-    max-width: 800px; /* Adjust based on preference */
-    margin: auto;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
-}
 
-/* Titles and descriptions */
-h1, h2, h3, p {
-    color: #EDE7F6; /* Light purple text for readability */
-}
-"""
+seafoam = Seafoam()
 
+with gr.Blocks(theme=seafoam) as demo:
+    with gr.Row():
+        image_input = gr.Image(type="pil")
+        question_input = gr.Textbox(lines=2, placeholder="Enter your question here...")
+    with gr.Row():
+        submit_button = gr.Button("Analyze")
+    output = gr.Textbox()
 
-# Create Gradio interface with custom CSS for a purple theme
-iface = gr.Interface(fn=analyze_image_direct,
-                     inputs=[gr.Image(type="pil"), gr.Textbox(lines=2, placeholder="Enter your question here...")],
-                     outputs='text',
-                     title="Direct Image Question Answering",
-                     description="Upload an image and ask a question about it directly using the model.",
-                     theme="dark",  # Use the dark theme as a base
-                     css=custom_css)  # Apply custom CSS
+    submit_button.click(fn=analyze_image_direct, inputs=[image_input, question_input], outputs=output)
 
-# Launch the interface
-iface.launch()
+demo.launch()