Update app.py (#1)

- Update app.py (f1d0361db30f03f615eaa4d1ba0bd658153b4ce3)


Co-authored-by: Andrew Huang <ahuang11@users.noreply.huggingface.co>

app.py

@@ -1,24 +1,32 @@
-import aiohttp
 import io
 import random
 import panel as pn
+import aiohttp
 
 from PIL import Image
 
 from transformers import CLIPProcessor, CLIPModel
 from typing import List, Tuple
 
-pn.extension(design='bootstrap', sizing_mode="stretch_width")
+pn.extension(design="bootstrap", sizing_mode="stretch_width")
+
+ICON_URLS = {
+    "brand-github": "https://github.com/holoviz/panel",
+    "brand-twitter": "https://twitter.com/Panel_Org",
+    "brand-linkedin": "https://www.linkedin.com/company/panel-org",
+    "message-circle": "https://discourse.holoviz.org/",
+    "brand-discord": "https://discord.gg/AXRHnJU6sP",
+}
+
 
 async def random_url(_):
-    api_url = random.choice([
-        "https://api.thecatapi.com/v1/images/search",
-        "https://api.thedogapi.com/v1/images/search"
-    ])
+    pet = random.choice(["cat", "dog"])
+    api_url = f"https://api.the{pet}api.com/v1/images/search"
     async with aiohttp.ClientSession() as session:
         async with session.get(api_url) as resp:
             return (await resp.json())[0]["url"]
 
+
 @pn.cache
 def load_processor_model(
     processor_name: str, model_name: str
@@ -54,33 +62,37 @@ async def process_inputs(class_names: List[str], image_url: str):
     High level function that takes in the user inputs and returns the
     classification results as panel objects.
     """
+    main.disabled = True
     if not image_url:
-        yield '## Provide an image URL' 
+        yield "##### ⚠️ Provide an image URL"
         return
-    yield '## Fetching image and running model ⚙'
+
+    yield "##### ⚙ Fetching image and running model..."
     pil_img = await open_image_url(image_url)
-    img = pn.pane.Image(pil_img, height=400, align='center')
+    img = pn.pane.Image(pil_img, height=400, align="center")
 
     class_items = class_names.split(",")
     class_likelihoods = get_similarity_scores(class_items, pil_img)
 
     # build the results column
-    results = pn.Column("## 🎉 Here are the results!", img)
+    results = pn.Column("##### 🎉 Here are the results!", img)
 
     for class_item, class_likelihood in zip(class_items, class_likelihoods):
         row_label = pn.widgets.StaticText(
-            name=class_item.strip(), value=f"{class_likelihood:.2%}", align='center'
+            name=class_item.strip(), value=f"{class_likelihood:.2%}", align="center"
         )
         row_bar = pn.indicators.Progress(
             value=int(class_likelihood * 100),
             sizing_mode="stretch_width",
             bar_color="secondary",
             margin=(0, 10),
-            design=pn.theme.Material
+            design=pn.theme.Material,
         )
         results.append(pn.Column(row_label, row_bar))
+    main.disabled = False
     yield results
 
+
 # create widgets
 randomize_url = pn.widgets.Button(name="Randomize URL", align="end")
 
@@ -95,25 +107,36 @@ class_names = pn.widgets.TextInput(
 )
 
 input_widgets = pn.Column(
-    "## 😊 Click randomize or paste a URL to start classifying!",
+    "##### 😊 Click randomize or paste a URL to start classifying!",
     pn.Row(image_url, randomize_url),
     class_names,
 )
 
 # add interactivity
-interactive_result = pn.bind(
-    process_inputs, image_url=image_url, class_names=class_names
+interactive_result = pn.panel(
+    pn.bind(process_inputs, image_url=image_url, class_names=class_names),
+    height=600,
 )
 
+# add footer
+footer_row = pn.Row(pn.Spacer(), align="center")
+for icon, url in ICON_URLS.items():
+    href_button = pn.widgets.Button(icon=icon, width=35, height=35)
+    href_button.js_on_click(code=f"window.open('{url}')")
+    footer_row.append(href_button)
+footer_row.append(pn.Spacer())
+
 # create dashboard
 main = pn.WidgetBox(
     input_widgets,
     interactive_result,
+    footer_row,
 )
 
+title = "Panel Demo - Image Classification"
 pn.template.BootstrapTemplate(
-    title="Panel Image Classification Demo",
+    title=title,
     main=main,
     main_max_width="min(50%, 698px)",
     header_background="#F08080",
-).servable(title="Panel Image Classification Demo");
+).servable(title=title)