Upload app.py with huggingface_hub

app.py

@@ -241,7 +241,7 @@ demo = gr.Interface(
     description="""
     <div class="sikt-header">
         <div style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
-            <img src="file/Sikt-Primærlogo-Mørk_0.png" alt="Sikt Logo" class="sikt-logo">
+            <img src="https://modansa.blob.core.windows.net/testcontainer/Sikt-Prim%C3%A6rlogo-M%C3%B8rk_0.png" alt="Sikt Logo" class="sikt-logo">
             <div style="flex: 1; min-width: 300px;">
                 <h3 style="margin: 0 0 0.5rem 0; color: var(--sds-color-text-secondary); font-size: 1.25rem; font-weight: 600;">
                     ESS Variable Classifier
@@ -271,17 +271,27 @@ demo = gr.Interface(
             categorizing them into subject areas. The model was trained on European Social Survey metadata
             and can classify questions into <strong>19 categories</strong>:
         </p>
-        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.5rem; margin-top: 1rem;">
-            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.9rem;">📚 Education</span>
-            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.9rem;">🏛️ Politics</span>
-            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.9rem;">🏥 Health</span>
-            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.9rem;">💼 Labour & Employment</span>
-            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.9rem;">🌍 Society & Culture</span>
-            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.9rem;">💰 Economics</span>
-            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.9rem;">🧠 Psychology</span>
-            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.9rem;">👥 Demographics</span>
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.5rem; margin-top: 1rem;">
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.85rem; border-left: 3px solid #7d5da6;">📚 Education</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.85rem; border-left: 3px solid #7d5da6;">🏛️ Politics</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.85rem; border-left: 3px solid #7d5da6;">🏥 Health</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.85rem; border-left: 3px solid #7d5da6;">💼 Labour & Employment</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.85rem; border-left: 3px solid #7d5da6;">🌍 Society & Culture</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.85rem; border-left: 3px solid #7d5da6;">💰 Economics</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.85rem; border-left: 3px solid #7d5da6;">🧠 Psychology</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.85rem; border-left: 3px solid #7d5da6;">👥 Demography</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.85rem; border-left: 3px solid #7d5da6;">🏠 Housing & Land Use</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.85rem; border-left: 3px solid #7d5da6;">🌱 Natural Environment</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.85rem; border-left: 3px solid #7d5da6;">⚖️ Law, Crime & Legal Systems</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.85rem; border-left: 3px solid #7d5da6;">📺 Media, Communication & Language</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.85rem; border-left: 3px solid #7d5da6;">👔 Social Stratification & Groupings</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.85rem; border-left: 3px solid #7d5da6;">🤝 Social Welfare Policy & Systems</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.85rem; border-left: 3px solid #7d5da6;">🚗 Transport & Travel</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.85rem; border-left: 3px solid #7d5da6;">🏪 Trade, Industry & Markets</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.85rem; border-left: 3px solid #7d5da6;">🔬 Science & Technology</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.85rem; border-left: 3px solid #7d5da6;">📜 History</span>
+            <span style="padding: 0.5rem; background: white; border-radius: 4px; font-size: 0.85rem; border-left: 3px solid #7d5da6;">📋 Other</span>
         </div>
-        <p style="color: #666; margin-top: 1rem; font-size: 0.9rem;"><em>...and 11 more specialized categories</em></p>
     </div>
 
     <div style="background: white; padding: 1.5rem; border-radius: var(--sds-space-border-radius-medium); margin-bottom: 2rem; border: 1px solid #e0e0e0;">