change the style

app.py

@@ -1,4 +1,4 @@
-import os 
+import os
 from collections.abc import Iterator
 from threading import Thread
 
@@ -7,148 +7,11 @@ import spaces
 import torch
 from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
 
-# Gemini-style colors
-GEMINI_COLORS = {
-    "light_blue": "#8ab4f8",
-    "blue": "#4285f4", 
-    "dark_blue": "#1a73e8",
-    "marine_blue": "#174ea6",
-    "white": "#ffffff",
-    "light_gray": "#f8f9fa"
-}
-
-# Custom CSS for Gemini styling
-GEMINI_CSS = """
-/* Main styling for Gemini theme */
-body {
-  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-  font-family: 'Google Sans', Arial, sans-serif;
-}
-
-/* Header and title styling */
-h1 {
-  text-align: center;
-  display: block;
-  color: #174ea6;
-  font-weight: 600;
-  margin-bottom: 1.5rem;
-}
-
-/* Chat interface styling */
-.gradio-container {
-  max-width: 1200px !important;
-  margin-left: auto !important;
-  margin-right: auto !important;
-}
-
-/* Message bubbles */
-.message-wrap .message.user-message {
-  background-color: #f8f9fa;
-  border: 1px solid #e0e0e0;
-  color: #202124;
-}
-
-.message-wrap .message.bot-message {
-  background: linear-gradient(135deg, #8ab4f8 0%, #4285f4 100%);
-  color: #ffffff;
-}
-
-/* Button styling */
-button.primary, .button.primary {
-  background: linear-gradient(135deg, #4285f4 0%, #174ea6 100%) !important;
-  color: #ffffff !important;
-  border-radius: 100vh !important;
-  border: none !important;
-  transition: all 0.3s ease !important;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
-}
-
-button.primary:hover, .button.primary:hover {
-  background: #174ea6 !important;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
-  transform: translateY(-1px) !important;
-}
-
-/* Slider styling */
-.gradio-slider input[type="range"]::-webkit-slider-thumb {
-  background: #4285f4 !important;
-}
-
-.gradio-slider input[type="range"] {
-  background: linear-gradient(90deg, #4285f4 0%, #8ab4f8 100%) !important;
-}
-
-/* Chat input area */
-.chat-input {
-  border-color: #8ab4f8 !important;
-  box-shadow: 0 0 4px rgba(138, 180, 248, 0.3) !important;
-  border-radius: 100vh !important;
-}
-
-.chat-input:focus {
-  border-color: #4285f4 !important;
-  box-shadow: 0 0 6px rgba(66, 133, 244, 0.5) !important;
-}
-
-/* Examples section */
-.examples-panel {
-  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
-  border: 1px solid rgba(138, 180, 248, 0.3);
-  border-radius: 8px;
-}
-
-.examples button {
-  background-color: #f8f9fa !important;
-  border: 1px solid #8ab4f8 !important;
-  color: #174ea6 !important;
-  margin: 5px !important;
-}
-
-.examples button:hover {
-  background-color: #8ab4f8 !important;
-  color: #ffffff !important;
-}
-
-/* Code blocks styling */
-.chatbot pre {
-  background-color: #f8f9fa !important;
-  border-left: 4px solid #4285f4 !important;
-}
-
-/* Additional styling for the description block */
-.prose {
-  color: #174ea6;
-}
-
-.prose a {
-  color: #4285f4;
-  text-decoration: none;
-}
-
-.prose a:hover {
-  text-decoration: underline;
-}
-
-/* Header banner with Gemini style */
-.gemini-header {
-  background: linear-gradient(90deg, #4285f4, #174ea6);
-  color: white;
-  padding: 15px;
-  border-radius: 10px;
-  margin-bottom: 20px;
-  text-align: center;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-}
-"""
-
 DESCRIPTION = """\
-<div class="gemini-header">
-  <h1>Gemini-Style Gemma 2 2B IT</h1>
-  <p>Welcome to our Gemini-themed interface for Google's latest iteration of open LLMs.</p>
-</div>
+# Hi, I'm Gemma 2 (2B) 👋
 
 This is a demo of [`google/gemma-2-2b-it`](https://huggingface.co/google/gemma-2-2b-it), fine-tuned for instruction following.
-For more details, please check [our post](https://huggingface.co/blog/gemma2).
+For more details, please check [the post](https://huggingface.co/blog/gemma2).
 
 👉 Looking for a larger and more powerful version? Try the 27B version in [HuggingChat](https://huggingface.co/chat/models/google/gemma-2-27b-it) and the 9B version in [this Space](https://huggingface.co/spaces/huggingface-projects/gemma-2-9b-it).
 """
@@ -210,87 +73,141 @@ def generate(
         yield "".join(outputs)
 
 
-# Create a custom theme with Gemini-inspired colors
-gemini_theme = gr.themes.Base(
-    primary_hue="blue",
-    secondary_hue="blue",
-    neutral_hue="gray",
-    text_size=gr.themes.sizes.text_md,
-).set(
-    body_background_fill=GEMINI_COLORS["white"],
-    body_background_fill_dark=GEMINI_COLORS["white"],
-    
-    button_primary_background_fill=GEMINI_COLORS["blue"],
-    button_primary_background_fill_hover=GEMINI_COLORS["dark_blue"],
-    button_primary_background_fill_dark=GEMINI_COLORS["blue"],
-    button_primary_text_color=GEMINI_COLORS["white"],
-    button_primary_text_color_dark=GEMINI_COLORS["white"],
-    
-    button_secondary_background_fill=GEMINI_COLORS["light_gray"],
-    button_secondary_background_fill_hover=GEMINI_COLORS["light_blue"],
-    button_secondary_text_color=GEMINI_COLORS["dark_blue"],
-    
-    block_title_text_color=GEMINI_COLORS["marine_blue"],
-    block_label_text_color=GEMINI_COLORS["dark_blue"],
-    
-    slider_color=GEMINI_COLORS["blue"],
-    slider_color_dark=GEMINI_COLORS["blue"],
-)
+# Embed our custom Gemini-like CSS here:
+gemini_css = """
+:root {
+  /* Adjust these if you want different start/end colors. */
+  --gradient-start: #0077BE; /* Marine/clear blue */
+  --gradient-end:   #FFFFFF; /* White */
+}
 
-with gr.Blocks(theme=gemini_theme, css=GEMINI_CSS) as demo:
-    gr.HTML(DESCRIPTION)
-    
-    chatbot = gr.ChatInterface(
-        fn=generate,
-        additional_inputs=[
-            gr.Slider(
-                label="Max new tokens",
-                minimum=1,
-                maximum=MAX_MAX_NEW_TOKENS,
-                step=1,
-                value=DEFAULT_MAX_NEW_TOKENS,
-            ),
-            gr.Slider(
-                label="Temperature",
-                minimum=0.1,
-                maximum=4.0,
-                step=0.1,
-                value=0.6,
-            ),
-            gr.Slider(
-                label="Top-p (nucleus sampling)",
-                minimum=0.05,
-                maximum=1.0,
-                step=0.05,
-                value=0.9,
-            ),
-            gr.Slider(
-                label="Top-k",
-                minimum=1,
-                maximum=1000,
-                step=1,
-                value=50,
-            ),
-            gr.Slider(
-                label="Repetition penalty",
-                minimum=1.0,
-                maximum=2.0,
-                step=0.05,
-                value=1.2,
-            ),
-        ],
-        stop_btn=None,
-        examples=[
-            ["Hello there! How are you doing?"],
-            ["Can you explain briefly to me what is the Python programming language?"],
-            ["Explain the plot of Cinderella in a sentence."],
-            ["How many hours does it take a man to eat a Helicopter?"],
-            ["Write a 100-word article on 'Benefits of Open-Source in AI research'"],
-        ],
-        cache_examples=False,
-        type="messages",
-        fill_height=True,
-    )
+/* Overall page and container background gradient */
+html, body, .gradio-container {
+  margin: 0;
+  padding: 0;
+  background: linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
+  font-family: "Helvetica", sans-serif;
+  color: #003366; /* A darker blue for text */
+}
+
+/* Center and style the h1 in the description block */
+.gradio-container h1 {
+  text-align: center;
+  margin-top: 1.2em;
+  margin-bottom: 0.6em;
+}
+
+/* Chat area styling */
+.chat-interface, .chat-interface .message {
+  background-color: transparent;
+}
+
+/* User message bubble */
+.chat-message.user {
+  background-color: #0099FF;
+  color: #FFFFFF;
+  border-radius: 8px;
+  padding: 8px 12px;
+  margin: 4px 0;
+}
+
+/* Bot message bubble */
+.chat-message.bot {
+  background-color: #E0F2FF;
+  color: #003366;
+  border-radius: 8px;
+  padding: 8px 12px;
+  margin: 4px 0;
+}
+
+/* Chat input */
+.chat-input textarea {
+  background-color: #FFFFFF;
+  color: #003366;
+  border: 1px solid #0099FF;
+  border-radius: 6px;
+}
+
+/* Slider bars, buttons, etc. */
+form.sliders input[type="range"] {
+  accent-color: #0077BE;
+}
+form.sliders label {
+  color: #003366;
+}
+
+.gradio-button, .chat-send-btn {
+  background-color: #0077BE;
+  color: #FFFFFF;
+  border-radius: 5px;
+  border: none;
+  cursor: pointer;
+}
+
+.gradio-button:hover, .chat-send-btn:hover {
+  background-color: #005FA0;
+}
+
+/* For warnings or system notes */
+.text-orange-500 {
+  color: #FF6600 !important;
+}
+"""
+
+demo = gr.ChatInterface(
+    fn=generate,
+    additional_inputs=[
+        gr.Slider(
+            label="Max new tokens",
+            minimum=1,
+            maximum=MAX_MAX_NEW_TOKENS,
+            step=1,
+            value=DEFAULT_MAX_NEW_TOKENS,
+        ),
+        gr.Slider(
+            label="Temperature",
+            minimum=0.1,
+            maximum=4.0,
+            step=0.1,
+            value=0.6,
+        ),
+        gr.Slider(
+            label="Top-p (nucleus sampling)",
+            minimum=0.05,
+            maximum=1.0,
+            step=0.05,
+            value=0.9,
+        ),
+        gr.Slider(
+            label="Top-k",
+            minimum=1,
+            maximum=1000,
+            step=1,
+            value=50,
+        ),
+        gr.Slider(
+            label="Repetition penalty",
+            minimum=1.0,
+            maximum=2.0,
+            step=0.05,
+            value=1.2,
+        ),
+    ],
+    stop_btn=None,
+    examples=[
+        ["Hello there! How are you doing?"],
+        ["Can you explain briefly to me what is the Python programming language?"],
+        ["Explain the plot of Cinderella in a sentence."],
+        ["How many hours does it take a man to eat a Helicopter?"],
+        ["Write a 100-word article on 'Benefits of Open-Source in AI research'"],
+    ],
+    cache_examples=False,
+    type="messages",
+    description=DESCRIPTION,
+    # Removing css_paths, replace with direct CSS:
+    css=gemini_css,
+    fill_height=True,
+)
 
 if __name__ == "__main__":
-    demo.queue(max_size=20).launch()
+    demo.queue(max_size=20).launch()

style.css

@@ -1,115 +1,11 @@
-/* Main styling for Gemini theme */
-:root {
-  --gemini-light-blue: #8ab4f8;
-  --gemini-blue: #4285f4;
-  --gemini-dark-blue: #1a73e8;
-  --gemini-marine-blue: #174ea6;
-  --gemini-white: #ffffff;
-  --gemini-light-gray: #f8f9fa;
-}
-
-body {
-  background: linear-gradient(135deg, var(--gemini-light-gray) 0%, var(--gemini-white) 100%);
-}
-
-/* Header and title styling */
 h1 {
   text-align: center;
   display: block;
-  color: var(--gemini-marine-blue);
-  font-weight: 600;
-  margin-bottom: 1.5rem;
-}
-
-/* Chat interface styling */
-.gradio-container {
-  max-width: 1200px !important;
-  margin-left: auto !important;
-  margin-right: auto !important;
-}
-
-/* Message bubbles */
-.message-wrap .message.user {
-  background-color: var(--gemini-light-gray);
-  border: 1px solid #e0e0e0;
 }
 
-.message-wrap .message.bot {
-  background-color: var(--gemini-light-blue);
-  background: linear-gradient(135deg, var(--gemini-light-blue) 0%, var(--gemini-blue) 100%);
-  color: var(--gemini-white);
-}
-
-/* Button styling */
-#duplicate-button, 
-button.primary, 
-.button.primary {
+#duplicate-button {
   margin: auto;
-  color: var(--gemini-white);
-  background: var(--gemini-dark-blue);
-  background: linear-gradient(135deg, var(--gemini-blue) 0%, var(--gemini-marine-blue) 100%);
+  color: #fff;
+  background: #1565c0;
   border-radius: 100vh;
-  border: none;
-  transition: all 0.3s ease;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-
-#duplicate-button:hover, 
-button.primary:hover, 
-.button.primary:hover {
-  background: var(--gemini-marine-blue);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  transform: translateY(-1px);
-}
-
-/* Slider styling */
-.gradio-slider input[type="range"]::-webkit-slider-thumb {
-  background: var(--gemini-blue);
-}
-
-.gradio-slider input[type="range"] {
-  background: linear-gradient(90deg, var(--gemini-blue) 0%, var(--gemini-light-blue) 100%);
 }
-
-/* Chat input area */
-.chat-input {
-  border-color: var(--gemini-light-blue);
-  box-shadow: 0 0 4px rgba(138, 180, 248, 0.3);
-}
-
-.chat-input:focus {
-  border-color: var(--gemini-blue);
-  box-shadow: 0 0 6px rgba(66, 133, 244, 0.5);
-}
-
-/* Examples section */
-.examples-panel {
-  background: linear-gradient(135deg, var(--gemini-white) 0%, var(--gemini-light-gray) 100%);
-  border: 1px solid rgba(138, 180, 248, 0.3);
-  border-radius: 8px;
-}
-
-.examples button {
-  background-color: var(--gemini-light-gray);
-  border: 1px solid var(--gemini-light-blue);
-  color: var(--gemini-marine-blue);
-}
-
-.examples button:hover {
-  background-color: var(--gemini-light-blue);
-  color: var(--gemini-white);
-}
-
-/* Additional styling for the description block */
-.prose {
-  color: var(--gemini-marine-blue);
-}
-
-.prose a {
-  color: var(--gemini-blue);
-  text-decoration: none;
-}
-
-.prose a:hover {
-  text-decoration: underline;
-}