Update app.py

app.py

@@ -227,197 +227,13 @@ def generate(input_dict: dict, chat_history: list[dict],
         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;
+css = '''
+.gradio-container{max-width: 1000px !important}
+h1{text-align:center}
+footer {
+    visibility: hidden
 }
-@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(
@@ -435,7 +251,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
+    css=css  
 )
 
 if __name__ == "__main__":