Update app.py

app.py

@@ -47,6 +47,7 @@ model_m = Qwen2VLForConditionalGeneration.from_pretrained(
     torch_dtype=torch.float16
 ).to("cuda").eval()
 
+
 def clean_chat_history(chat_history):
     """
     Filter out any chat entries whose "content" is not a string.
@@ -58,6 +59,7 @@ def clean_chat_history(chat_history):
             cleaned.append(msg)
     return cleaned
 
+
 def downsample_video(video_path):
     """
     Downsamples the video to 10 evenly spaced frames.
@@ -80,6 +82,7 @@ def downsample_video(video_path):
     vidcap.release()
     return frames
 
+
 def progress_bar_html(label: str) -> str:
     """
     Returns an HTML snippet for a thin progress bar with a label.
@@ -100,6 +103,7 @@ def progress_bar_html(label: str) -> str:
 </style>
     '''
 
+
 @spaces.GPU(duration=60, enable_queue=True)
 def generate(input_dict: dict, chat_history: list[dict],
              max_new_tokens: int = 1024,
@@ -222,6 +226,200 @@ def generate(input_dict: dict, chat_history: list[dict],
         final_response = "".join(outputs)
         yield final_response
 
+
+# Custom CSS for the theme (combining font and global styles)
+custom_css = """
+/* ------------------ START FONTS.CSS ------------------ */
+/* GT Maru Regular */
+@font-face {
+  font-family: 'GT-Maru';
+  src: url('/fonts/GT Maru/GT-Maru-Regular.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'GT-Maru';
+  src: url('/fonts/GT Maru/GT-Maru-Regular-Oblique.otf') format('opentype');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* GT Maru Light */
+@font-face {
+  font-family: 'GT-Maru';
+  src: url('/fonts/GT Maru/GT-Maru-Light.otf') format('opentype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'GT-Maru';
+  src: url('/fonts/GT Maru/GT-Maru-Light-Oblique.otf') format('opentype');
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* GT Maru Medium */
+@font-face {
+  font-family: 'GT-Maru';
+  src: url('/fonts/GT Maru/GT-Maru-Medium.otf') format('opentype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'GT-Maru';
+  src: url('/fonts/GT Maru/GT-Maru-Medium-Oblique.otf') format('opentype');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* GT Maru Bold */
+@font-face {
+  font-family: 'GT-Maru';
+  src: url('/fonts/GT Maru/GT-Maru-Bold.otf') format('opentype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'GT-Maru';
+  src: url('/fonts/GT Maru/GT-Maru-Bold-Oblique.otf') format('opentype');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* GT Maru Black */
+@font-face {
+  font-family: 'GT-Maru';
+  src: url('/fonts/GT Maru/GT-Maru-Black.otf') format('opentype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'GT-Maru';
+  src: url('/fonts/GT Maru/GT-Maru-Black-Oblique.otf') format('opentype');
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* GT Maru Mono Regular */
+@font-face {
+  font-family: 'GT-Maru-Mono';
+  src: url('/fonts/GT Maru/GT-Maru-Mono-Regular.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'GT-Maru-Mono';
+  src: url('/fonts/GT Maru/GT-Maru-Mono-Regular-Oblique.otf') format('opentype');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* GT Maru Mono Medium */
+@font-face {
+  font-family: 'GT-Maru-Mono';
+  src: url('/fonts/GT Maru/GT-Maru-Mono-Medium.otf') format('opentype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'GT-Maru-Mono';
+  src: url('/fonts/GT Maru/GT-Maru-Mono-Medium-Oblique.otf') format('opentype');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* GT Maru Mega Midi (for special display text) */
+@font-face {
+  font-family: 'GT-Maru-Mega-Midi';
+  src: url('/fonts/GT Maru/GT-Maru-Mega-Midi.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* ------------------ END FONTS.CSS ------------------ */
+/* ------------------ START GLOBAL.CSS ------------------ */
+
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+  --font-gt-maru: 'GT-Maru', sans-serif;
+  --font-gt-maru-mono: 'GT-Maru-Mono', monospace;
+  --font-gt-maru-mega: 'GT-Maru-Mega-Midi', sans-serif;
+  --notebook-bg: #f3f4f6; /* Tailwind gray-100 */
+  --notebook-dot: #d1d5db; /* Tailwind gray-300 for dots */
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-gt-maru);
+  --font-mono: var(--font-gt-maru-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  font-family: var(--font-gt-maru);
+  background-color: var(--notebook-bg);
+  background-image: radial-gradient(var(--notebook-dot) 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+
+/* Container styling for paper effect */
+.paper-container {
+  background-color: rgba(255, 255, 255, 0.7);
+  border-radius: 12px;
+  box-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.05),
+    0 8px 20px rgba(0, 0, 0, 0.03);
+  backdrop-filter: blur(2px);
+}
+
+/* Notebook paper dotted background - now for specific elements only */
+.notebook-paper-bg {
+  background-color: var(--notebook-bg);
+  background-image: radial-gradient(var(--notebook-dot) 1px, transparent 1px);
+  background-size: 24px 24px;
+  background-position: 0 0;
+  border-radius: 12px;
+  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.03);
+}
+
+/* Shadow effect for paper depth */
+.paper-shadow {
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.05),
+    0 4px 6px rgba(0, 0, 0, 0.03),
+    inset 0 0 3px rgba(255, 255, 255, 0.8);
+}
+
+/* ------------------ END GLOBAL.CSS ------------------ */
+"""
+
+# Create the Gradio ChatInterface with the custom CSS applied
 demo = gr.ChatInterface(
     fn=generate,
     additional_inputs=[
@@ -237,6 +435,7 @@ demo = gr.ChatInterface(
     textbox=gr.MultimodalTextbox(label="Query Input", file_types=["image", "video"], file_count="multiple"),
     stop_btn="Stop Generation",
     multimodal=True,
+    css=custom_css  # Apply our custom theme CSS
 )
 
 if __name__ == "__main__":