Set Capabara theme

app.py

@@ -6,7 +6,7 @@ import spaces
 import torch
 from transformers import AutoModelForCausalLM, AutoProcessor
 
-DESCRIPTION = "# Image Captioning with GIT"
+DESCRIPTION = "# Capabara - Image Captioning with GIT"
 
 device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
 
@@ -22,12 +22,46 @@ def run(image: PIL.Image.Image) -> str:
     return processor.batch_decode(generated_ids, skip_special_tokens=True)[0]
 
 
-with gr.Blocks(css_paths="style.css") as demo:
-    gr.Markdown(DESCRIPTION)
+with gr.Blocks(
+    title="Capabara - Image Captioning with GIT",
+    theme=gr.themes.Default(font=[gr.themes.GoogleFont("Work Sans"), "sans-serif"]),
+    css_paths="style.css",
+) as demo:
+    gr.Image(
+        elem_id="capa-logo",
+        value="./static/assets/TM_Capabara_210622.png",
+        container=False,
+        height=139,
+        width=176,
+        show_download_button=False,
+        show_fullscreen_button=False,
+    )
+
+    gr.HTML(
+        elem_id="capa-title",
+        value="""
+        <h1>Capabara - Image Captioning with GIT</h1>
+        """,
+    )
+
     input_image = gr.Image(type="pil")
-    run_button = gr.Button("Caption")
+    run_button = gr.Button(value="Caption", elem_classes=["capa-btn"])
     output = gr.Textbox(label="Result")
 
+    gr.HTML("""<br/>""")
+    gr.HTML(
+        """
+            <h4>Reference</h4>
+            <ul>
+                <li>
+                    <p>
+                        This project uses code from <a href="https://huggingface.co/spaces/hysts/image-captioning-with-git/tree/main" target="_blank">Hysts</a>. Thank you for your contributions!
+                    </p>
+                </li>
+            </ul>
+        """
+    )
+
     run_button.click(
         fn=run,
         inputs=input_image,

style.css

@@ -1,11 +1,48 @@
+@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap");
+
 h1 {
   text-align: center;
   display: block;
 }
 
-#duplicate-button {
-  margin: auto;
+h1,
+h4,
+li,
+p {
   color: #fff;
-  background: #1565c0;
-  border-radius: 100vh;
+}
+
+body {
+  font-family: "Work Sans", sans-serif !important;
+}
+
+body > gradio-app {
+  background: #0c4a6e !important;
+}
+
+#capa-logo {
+  width: 11rem;
+  display: block;
+  margin: 0 auto 0 auto;
+}
+
+#capa-logo > div.image-container > button {
+  cursor: default;
+}
+
+#capa-logo > div.image-container > button:hover {
+  background-color: transparent !important;
+}
+
+#capa-logo > div.image-container > div {
+  display: none;
+}
+
+.capa-btn {
+  color: #fff;
+  background: #f2762e;
+}
+
+.capa-btn:hover {
+  background: #fc9f53;
 }