Merge pull request #651 from rohit141914/figma_assistance

Made some UI change to make UI more attractive and  change the name from "Figma assistance" to "Figma AI Assistant"

week2/community-contributions/Figma_AI_Assistance/.github/workflows/update_space.yml

@@ -3,7 +3,7 @@ name: Run Python script
 on:
   push:
     branches:
-      - figma_assistance
+      - Figma_AI_Assistant
 
 jobs:
   build:

week2/community-contributions/Figma_AI_Assistance/README.md

@@ -1,5 +1,5 @@
 ---
-title: Figma_assistance
+title: Figma_AI_Assistant
 app_file: day_5_figma_assistance.py
 sdk: gradio
 sdk_version: 5.38.2

week2/community-contributions/Figma_AI_Assistance/day_5_figma_assistance.py

@@ -292,7 +292,6 @@ custom_css = """
     background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
     padding: 15px 20px;
     border-radius: 10px;
-    margin: 20px 0;
 }
 
 .quickstart-title {
@@ -315,7 +314,7 @@ with gr.Blocks(title="Figma Onboarding Assistant", theme=gr.themes.Soft(), css=c
     gr.HTML(
         """
         <div class="header-container">
-            <h1 class="header-title">🎨 Figma Onboarding Assistant</h1>
+            <h1 class="header-title">🎨 Figma AI Assistant</h1>
             <p class="header-subtitle">Your AI-powered Figma learning companion</p>
         </div>
         
@@ -351,26 +350,6 @@ with gr.Blocks(title="Figma Onboarding Assistant", theme=gr.themes.Soft(), css=c
         """
     )
     
-    # Model selection dropdown
-    model_dropdown = gr.Dropdown(
-        choices=["OpenAI (GPT-3.5)", "Google Gemini (2.0 Flash)", "Claude (Sonnet 4)"],
-        value="OpenAI (GPT-3.5)",
-        label="Select AI Model",
-        info="Choose which AI model to use for responses"
-    )
-    
-    with gr.Row():
-        msg = gr.Textbox(
-            placeholder="Type your Figma question here...",
-            container=False,
-            scale=4
-        )
-        submit_btn = gr.Button("Ask", scale=1, variant="primary")
-        clear_btn = gr.Button("Clear Chat", scale=1)
-        audio_btn = gr.Button("🔊 Play Audio", scale=1, variant="secondary")
-        clear_audio_btn = gr.Button("🔇 Clear Audio", scale=1, variant="secondary")
-    
-
     # Example questions
     gr.HTML(
         """
@@ -380,7 +359,7 @@ with gr.Blocks(title="Figma Onboarding Assistant", theme=gr.themes.Soft(), css=c
         </div>
         """
     )
-    
+
     with gr.Row():
         example_btns = [
             gr.Button(
@@ -405,6 +384,24 @@ with gr.Blocks(title="Figma Onboarding Assistant", theme=gr.themes.Soft(), css=c
             )
         ]
 
+    # Model selection dropdown
+    model_dropdown = gr.Dropdown(
+        choices=["OpenAI (GPT-3.5)", "Google Gemini (2.0 Flash)", "Claude (Sonnet 4)"],
+        value="OpenAI (GPT-3.5)",
+        label="Select AI Model",
+        info="Choose which AI model to use for responses"
+    )
+    
+    with gr.Row():
+        msg = gr.Textbox(
+            placeholder="Type your Figma question here...",
+            container=False,
+            scale=4
+        )
+        submit_btn = gr.Button("Ask", scale=1, variant="primary")
+        clear_btn = gr.Button("Clear Chat", scale=1)
+
+
     # Your components with simple styling
     chatbot = gr.Chatbot(
         type="messages",
@@ -412,6 +409,9 @@ with gr.Blocks(title="Figma Onboarding Assistant", theme=gr.themes.Soft(), css=c
         placeholder="Ask me anything about Figma! For example: 'How do I create a component?' or 'What are frames in Figma?'",
         elem_classes=["styled-chat"]
     )
+    with gr.Row():
+        audio_btn = gr.Button("🔊 Text To Audio", scale=1, variant="primary")
+        clear_audio_btn = gr.Button("🔇 Clear Audio", scale=1, variant="secondary")
 
     audio_output = gr.Audio(
         label="Audio Response",

week2/community-contributions/day_5_figma_assistance.ipynb

@@ -301,7 +301,6 @@
     "    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n",
     "    padding: 15px 20px;\n",
     "    border-radius: 10px;\n",
-    "    margin: 20px 0;\n",
     "}\n",
     "\n",
     ".quickstart-title {\n",
@@ -324,7 +323,7 @@
     "    gr.HTML(\n",
     "        \"\"\"\n",
     "        <div class=\"header-container\">\n",
-    "            <h1 class=\"header-title\">🎨 Figma Onboarding Assistant</h1>\n",
+    "            <h1 class=\"header-title\">🎨 Figma AI Assistant</h1>\n",
     "            <p class=\"header-subtitle\">Your AI-powered Figma learning companion</p>\n",
     "        </div>\n",
     "        \n",
@@ -360,26 +359,6 @@
     "        \"\"\"\n",
     "    )\n",
     "    \n",
-    "    # Model selection dropdown\n",
-    "    model_dropdown = gr.Dropdown(\n",
-    "        choices=[\"OpenAI (GPT-3.5)\", \"Google Gemini (2.0 Flash)\", \"Claude (Sonnet 4)\"],\n",
-    "        value=\"OpenAI (GPT-3.5)\",\n",
-    "        label=\"Select AI Model\",\n",
-    "        info=\"Choose which AI model to use for responses\"\n",
-    "    )\n",
-    "    \n",
-    "    with gr.Row():\n",
-    "        msg = gr.Textbox(\n",
-    "            placeholder=\"Type your Figma question here...\",\n",
-    "            container=False,\n",
-    "            scale=4\n",
-    "        )\n",
-    "        submit_btn = gr.Button(\"Ask\", scale=1, variant=\"primary\")\n",
-    "        clear_btn = gr.Button(\"Clear Chat\", scale=1)\n",
-    "        audio_btn = gr.Button(\"🔊 Play Audio\", scale=1, variant=\"secondary\")\n",
-    "        clear_audio_btn = gr.Button(\"🔇 Clear Audio\", scale=1, variant=\"secondary\")\n",
-    "    \n",
-    "\n",
     "    # Example questions\n",
     "    gr.HTML(\n",
     "        \"\"\"\n",
@@ -389,7 +368,7 @@
     "        </div>\n",
     "        \"\"\"\n",
     "    )\n",
-    "    \n",
+    "\n",
     "    with gr.Row():\n",
     "        example_btns = [\n",
     "            gr.Button(\n",
@@ -414,6 +393,24 @@
     "            )\n",
     "        ]\n",
     "\n",
+    "    # Model selection dropdown\n",
+    "    model_dropdown = gr.Dropdown(\n",
+    "        choices=[\"OpenAI (GPT-3.5)\", \"Google Gemini (2.0 Flash)\", \"Claude (Sonnet 4)\"],\n",
+    "        value=\"OpenAI (GPT-3.5)\",\n",
+    "        label=\"Select AI Model\",\n",
+    "        info=\"Choose which AI model to use for responses\"\n",
+    "    )\n",
+    "    \n",
+    "    with gr.Row():\n",
+    "        msg = gr.Textbox(\n",
+    "            placeholder=\"Type your Figma question here...\",\n",
+    "            container=False,\n",
+    "            scale=4\n",
+    "        )\n",
+    "        submit_btn = gr.Button(\"Ask\", scale=1, variant=\"primary\")\n",
+    "        clear_btn = gr.Button(\"Clear Chat\", scale=1)\n",
+    "\n",
+    "\n",
     "    # Your components with simple styling\n",
     "    chatbot = gr.Chatbot(\n",
     "        type=\"messages\",\n",
@@ -421,6 +418,9 @@
     "        placeholder=\"Ask me anything about Figma! For example: 'How do I create a component?' or 'What are frames in Figma?'\",\n",
     "        elem_classes=[\"styled-chat\"]\n",
     "    )\n",
+    "    with gr.Row():\n",
+    "        audio_btn = gr.Button(\"🔊 Text To Audio\", scale=1, variant=\"primary\")\n",
+    "        clear_audio_btn = gr.Button(\"🔇 Clear Audio\", scale=1, variant=\"secondary\")\n",
     "\n",
     "    audio_output = gr.Audio(\n",
     "        label=\"Audio Response\",\n",