Add Seafoam theme to the project

app.py

@@ -1,36 +1,45 @@
 import torch
 import spaces
 from transformers import (
-    AutoProcessor,
     BitsAndBytesConfig,
+)
+from transformers import (
+    TextIteratorStreamer,
+    AutoModelForCausalLM,
+    CodeGenTokenizerFast as Tokenizer,
+)
+from transformers import (
+    AutoProcessor,
     LlavaForConditionalGeneration,
 )
 from PIL import Image
 import gradio as gr
 from threading import Thread
-from transformers import TextIteratorStreamer, AutoModelForCausalLM, CodeGenTokenizerFast as Tokenizer
 from dotenv import load_dotenv
-import os
+
 # Import Supabase functions
 from db_client import get_user_history, update_user_history, delete_user_history
+
 # Add these imports
 from datetime import datetime
 import pytz
 from gradio.components import LoginButton
 from typing import Optional
 
+from theme import Seafoam
+
 
 load_dotenv()
 
 # Add TESTING variable
-TESTING = False 
+TESTING = False
 
 IS_LOGGED_IN = False
 USER_ID = None
 
 # Hugging Face model id
-# model_id = "mistral-community/pixtral-12b"
-model_id = "blanchon/pixtral-nutrition-3e-05_r-3_epochs-constant_7a9a"
+model_id = "mistral-community/pixtral-12b"
+# model_id = "blanchon/pixtral-nutrition-3e-05_r-3_epochs-constant_7a9a"
 
 # BitsAndBytesConfig int-4 config
 bnb_config = BitsAndBytesConfig(
@@ -76,10 +85,11 @@ processor.chat_template = """
         </s>
     {%- endif %}
 {%- endfor %}
-""".replace('    ', "")
+""".replace("    ", "")
 
 processor.tokenizer.pad_token = processor.tokenizer.eos_token
 
+
 @spaces.GPU
 def bot_streaming(chatbot, image_input, max_new_tokens=250):
     # Preprocess inputs
@@ -88,7 +98,7 @@ def bot_streaming(chatbot, image_input, max_new_tokens=250):
     text_input = chatbot[-1][0]
 
     # Get current time in Paris timezone
-    paris_tz = pytz.timezone('Europe/Paris')
+    paris_tz = pytz.timezone("Europe/Paris")
     current_time = datetime.now(paris_tz).strftime("%I:%M%p")
 
     if text_input != "":
@@ -104,15 +114,16 @@ def bot_streaming(chatbot, image_input, max_new_tokens=250):
         else:
             image = Image.fromarray(image_input).convert("RGB")
         images.append(image)
-        messages.append({
-            "role": "user",
-            "content": [{"type": "text", "text": text_input}, {"type": "image"}]
-        })
+        messages.append(
+            {
+                "role": "user",
+                "content": [{"type": "text", "text": text_input}, {"type": "image"}],
+            }
+        )
     else:
-        messages.append({
-            "role": "user",
-            "content": [{"type": "text", "text": text_input}]
-        })
+        messages.append(
+            {"role": "user", "content": [{"type": "text", "text": text_input}]}
+        )
 
     # Apply chat template
     texts = processor.apply_chat_template(messages)
@@ -131,7 +142,7 @@ def bot_streaming(chatbot, image_input, max_new_tokens=250):
 
     thread = Thread(target=model.generate, kwargs=generation_kwargs)
     thread.start()
-    
+
     response = ""
     for new_text in streamer:
         response += new_text
@@ -141,34 +152,59 @@ def bot_streaming(chatbot, image_input, max_new_tokens=250):
     thread.join()
 
     # Debug output
-    print('*'*60)
-    print('*'*60)
-    print('BOT_STREAMING_CONV_START')
+    print("*" * 60)
+    print("*" * 60)
+    print("BOT_STREAMING_CONV_START")
     for i, (request, answer) in enumerate(chatbot[:-1], 1):
-        print(f'Q{i}:\n {request}')
-        print(f'A{i}:\n {answer}')
-    print('New_Q:\n', text_input)
-    print('New_A:\n', response)
-    print('BOT_STREAMING_CONV_END')
+        print(f"Q{i}:\n {request}")
+        print(f"A{i}:\n {answer}")
+    print("New_Q:\n", text_input)
+    print("New_A:\n", response)
+    print("BOT_STREAMING_CONV_END")
 
-    
     if IS_LOGGED_IN:
-        new_history = messages + [{"role": "assistant", "content": [{"type": "text", "text": response}]}]
+        new_history = messages + [
+            {"role": "assistant", "content": [{"type": "text", "text": response}]}
+        ]
         update_user_history(USER_ID, new_history)
 
+
+seafoam = Seafoam()
+
 # Define the HTML content for the header
-html = f"""
-<p align="center" style="font-size: 2.5em; line-height: 1;">
+html = """
+<!-- Foreground content -->
+<p align="center" style="font-size: 2.5em; line-height: 1; ">
     <span style="display: inline-block; vertical-align: middle;">🍽️</span>
     <span style="display: inline-block; vertical-align: middle;">PixDiet</span>
 </p>
-<center><font size=3><b>PixDiet</b> is your AI nutrition expert. Upload an image of your meal and chat with our AI to get personalized advice on your diet, meal composition, and ways to improve your nutrition.</font></center>
-<div style="display: flex; justify-content: center; align-items: center; margin-top: 20px;">
-    <img src="https://zozs97eh0bkqexza.public.blob.vercel-storage.com/alan-VD7bRf1rKuEBL6EDAjw0eLGVodhoh8.png" alt="Alan AI Logo" style="height: 50px; margin-right: 20px;">
-    <img src="https://seeklogo.com/images/M/mistral-ai-icon-logo-B3319DCA6B-seeklogo.com.png" alt="Mistral AI Logo" style="height: 50px;">
+<center>
+    <font size=3><b>PixDiet</b> is your AI nutrition expert. Upload an image of your meal and chat with our AI to get personalized advice on your diet, meal composition, and ways to improve your nutrition.</font>
+</center>
+<!-- Background image positioned behind everything -->
+<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 20px; width: 100%;">
+    <div style="display: flex; justify-content: center; width: 100%;">
+        <img src="https://dropshare.blanchon.xyz/public/dropshare/alan.png" alt="Alan AI Logo" style="height: 50px; margin-right: 20px;">
+        <img src="https://dropshare.blanchon.xyz/public/dropshare/mistral-ai-icon-logo-B3319DCA6B-seeklogo.com.png" alt="Mistral AI Logo" style="height: 50px;">
+    </div>
 </div>
 """
 
+footer_html = """
+<!-- Footer content -->
+<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 20px; width: 100%;">
+    <div style="display: flex; justify-content: center; width: 100%;">
+        <img src="https://dropshare.blanchon.xyz/public/dropshare//VariantVariant6-Photoroom.png" alt="Background Image" 
+    style="height: 100px; width: 100%; object-fit: scale-down;">
+    </div>
+    <div>
+        Made with ❤️ during the Mistral AI x Alan Hackathon.
+    </div>
+
+</div>
+"""
+
+
 # Define LaTeX delimiters
 latex_delimiters_set = [
     {"left": "\\(", "right": "\\)", "display": False},
@@ -177,39 +213,71 @@ latex_delimiters_set = [
     {"left": "\\begin{alignat}", "right": "\\end{alignat}", "display": True},
     {"left": "\\begin{gather}", "right": "\\end{gather}", "display": True},
     {"left": "\\begin{CD}", "right": "\\end{CD}", "display": True},
-    {"left": "\\[", "right": "\\]", "display": True}
+    {"left": "\\[", "right": "\\]", "display": True},
 ]
 
 # Create the Gradio interface
-with gr.Blocks(title="PixDiet", theme=gr.themes.Ocean()) as demo:
+with gr.Blocks(
+    title="PixDiet", theme=seafoam, css="footer{display:none !important}"
+) as demo:
     gr.HTML(html)
-    
-    
+
     with gr.Row():
         with gr.Column(scale=3):
-            image_input = gr.Image(label="Upload your meal image", height=350, type="pil")
+            about_you = gr.Textbox(
+                label="About you", placeholder="Add information about you here..."
+            )
+            image_input = gr.Image(
+                label="Upload your meal image", height=350, type="pil"
+            )
             gr.Examples(
                 examples=[
-                    ["./examples/mistral_breakfast.jpeg", ""],
-                    ["./examples/mistral_desert.jpeg", ""],
-                    ["./examples/mistral_snacks.jpeg", ""],
-                    ["./examples/mistral_pasta.jpeg", ""],
-
+                    [
+                        "./examples/mistral_breakfast.jpeg",
+                        "John, 45 years old, 80kg, lactose intolerant. Training for his first triathlon.",
+                    ],
+                    [
+                        "./examples/mistral_desert.jpeg",
+                        "Emma, 26 years old, 55kg, iron deficiency. Training for her first Ironman competition.",
+                    ],
+                    [
+                        "./examples/mistral_snacks.jpeg",
+                        "Paul, 34 years old, 62kg, no known pathologies. Focused on improving strength for weightlifting competitions.",
+                    ],
+                    [
+                        "./examples/mistral_pasta.jpeg",
+                        "Carla, 52 years old, 58kg, no known pathologies. Currently training for her first marathon.",
+                    ],
                 ],
-                inputs=[image_input, gr.Textbox(visible=False)]
+                inputs=[image_input, about_you],
             )
         with gr.Column(scale=7):
-            chatbot = gr.Chatbot(label="Chat with PixDiet", layout="panel", height=600, show_copy_button=True, latex_delimiters=latex_delimiters_set)
-            text_input = gr.Textbox(label="Ask about your meal", placeholder="(Optional) Enter your message here...", lines=1, container=False)
+            chatbot = gr.Chatbot(
+                label="Chat with PixDiet",
+                layout="panel",
+                height=700,
+                show_copy_button=True,
+                latex_delimiters=latex_delimiters_set,
+            )
+            text_input = gr.Textbox(
+                label="Ask about your meal",
+                placeholder="(Optional) Enter your message here...",
+                lines=1,
+                container=False,
+            )
             with gr.Row():
                 send_btn = gr.Button("Send", variant="primary", visible=True)
-                login_button = LoginButton(visible=True)
-                clear_btn = gr.Button("Delete my historic", variant="stop", visible=True)
+                login_button = LoginButton(visible=True, value="Login")
+                clear_btn = gr.Button(
+                    "Delete my historic",
+                    variant="stop",
+                    visible=True,
+                )
 
     def submit_chat(chatbot, text_input):
-        response = ''
+        response = ""
         chatbot.append((text_input, response))
-        return chatbot, ''
+        return chatbot, ""
 
     def clear_chat():
         if USER_ID:
@@ -218,7 +286,7 @@ with gr.Blocks(title="PixDiet", theme=gr.themes.Ocean()) as demo:
 
     def user_logged_in(data, user: Optional[gr.OAuthProfile]):
         global IS_LOGGED_IN, USER_ID
-        
+
         print("login")
         print(data)
 
@@ -233,7 +301,6 @@ with gr.Blocks(title="PixDiet", theme=gr.themes.Ocean()) as demo:
             USER_ID = "john doe"
 
         IS_LOGGED_IN = True
-        
 
     def get_profile(profile) -> dict:
         print(dir(profile))
@@ -243,16 +310,22 @@ with gr.Blocks(title="PixDiet", theme=gr.themes.Ocean()) as demo:
             "name": profile.get("name"),
         }
 
-    send_click_event = send_btn.click(submit_chat, [chatbot, text_input], [chatbot, text_input]).then(
-        bot_streaming, [chatbot, image_input], chatbot
-    )
-    submit_event = text_input.submit(submit_chat, [chatbot, text_input], [chatbot, text_input]).then(
-        bot_streaming, [chatbot, image_input], chatbot
-    )
+    send_click_event = send_btn.click(
+        submit_chat, [chatbot, text_input], [chatbot, text_input]
+    ).then(bot_streaming, [chatbot, image_input], chatbot)
+    submit_event = text_input.submit(
+        submit_chat, [chatbot, text_input], [chatbot, text_input]
+    ).then(bot_streaming, [chatbot, image_input], chatbot)
     clear_btn.click(clear_chat, outputs=[chatbot, image_input, text_input])
 
     # Add login event handler
-    login_button.click(user_logged_in, inputs=[login_button], outputs=[login_button, send_btn, clear_btn])
+    login_button.click(
+        user_logged_in,
+        inputs=[login_button],
+        outputs=[login_button, send_btn, clear_btn],
+    )
+
+    gr.HTML(footer_html)
 
 if __name__ == "__main__":
     demo.launch(debug=False, share=False, show_api=False)

theme.py

@@ -0,0 +1,56 @@
+from __future__ import annotations
+from typing import Iterable
+from gradio.themes.base import Base
+from gradio.themes.utils import colors, fonts, sizes
+
+
+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_md,
+        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(
+            # Simpler, subtle background
+            body_background_fill="*primary_50",
+            body_background_fill_dark="*primary_900",
+            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_primary_shadow="*shadow_drop_lg",
+            button_large_padding="32px",
+        )
+
+
+seafoam = Seafoam()