Update app.py

app.py

@@ -37,73 +37,32 @@ css = """
         }
         #chatbot {
             min-height: 30rem;
-            margin: auto;
+            margin-bottom: 15px;
+            margin-left: auto;
+            margin-right: auto;
         }
 """
 
 with gr.Blocks(css=css) as demo:
 
-    # gr.HTML(
-    #     """
-    #         <div style="text-align: center; margin: 0 auto;">
-    #           <div
-    #             style="
-    #               display: inline-flex;
-    #               align-items: center;
-    #               gap: 0.8rem;
-    #               font-size: 1.75rem;
-    #             "
-    #           >
-    #             <svg
-    #               width="0.65em"
-    #               height="0.65em"
-    #               viewBox="0 0 115 115"
-    #               fill="none"
-    #               xmlns="http://www.w3.org/2000/svg"
-    #             >
-    #               <rect width="23" height="23" fill="white"></rect>
-    #               <rect y="69" width="23" height="23" fill="white"></rect>
-    #               <rect x="23" width="23" height="23" fill="#AEAEAE"></rect>
-    #               <rect x="23" y="69" width="23" height="23" fill="#AEAEAE"></rect>
-    #               <rect x="46" width="23" height="23" fill="white"></rect>
-    #               <rect x="46" y="69" width="23" height="23" fill="white"></rect>
-    #               <rect x="69" width="23" height="23" fill="black"></rect>
-    #               <rect x="69" y="69" width="23" height="23" fill="black"></rect>
-    #               <rect x="92" width="23" height="23" fill="#D9D9D9"></rect>
-    #               <rect x="92" y="69" width="23" height="23" fill="#AEAEAE"></rect>
-    #               <rect x="115" y="46" width="23" height="23" fill="white"></rect>
-    #               <rect x="115" y="115" width="23" height="23" fill="white"></rect>
-    #               <rect x="115" y="69" width="23" height="23" fill="#D9D9D9"></rect>
-    #               <rect x="92" y="46" width="23" height="23" fill="#AEAEAE"></rect>
-    #               <rect x="92" y="115" width="23" height="23" fill="#AEAEAE"></rect>
-    #               <rect x="92" y="69" width="23" height="23" fill="white"></rect>
-    #               <rect x="69" y="46" width="23" height="23" fill="white"></rect>
-    #               <rect x="69" y="115" width="23" height="23" fill="white"></rect>
-    #               <rect x="69" y="69" width="23" height="23" fill="#D9D9D9"></rect>
-    #               <rect x="46" y="46" width="23" height="23" fill="black"></rect>
-    #               <rect x="46" y="115" width="23" height="23" fill="black"></rect>
-    #               <rect x="46" y="69" width="23" height="23" fill="black"></rect>
-    #               <rect x="23" y="46" width="23" height="23" fill="#D9D9D9"></rect>
-    #               <rect x="23" y="115" width="23" height="23" fill="#AEAEAE"></rect>
-    #               <rect x="23" y="69" width="23" height="23" fill="black"></rect>
-    #             </svg>
-    #             <h1 style="font-weight: 900; margin-bottom: 7px;margin-top:5px">
-    #               Stable Diffusion 2.1 Demo
-    #             </h1>
-    #           </div>
-    #           <p style="margin-bottom: 10px; font-size: 94%; line-height: 23px;">
-    #             Stable Diffusion 2.1 is the latest text-to-image model from StabilityAI. <a style="text-decoration: underline;" href="https://huggingface.co/spaces/stabilityai/stable-diffusion-1">Access Stable Diffusion 1 Space here</a><br>For faster generation and API
-    #             access you can try
-    #             <a
-    #               href="http://beta.dreamstudio.ai/"
-    #               style="text-decoration: underline;"
-    #               target="_blank"
-    #               >DreamStudio Beta</a
-    #             >.</a>
-    #           </p>
-    #         </div>
-    #     """
-    # )
+    gr.HTML(
+        """
+            <div style="text-align: center; margin: 0 auto;">
+              <div
+                style="
+                  display: inline-flex;
+                  align-items: center;
+                  gap: 0.8rem;
+                  font-size: 1.75rem;
+                "
+              >
+                <h1 style="font-weight: 900; margin-bottom: 7px;margin-top:5px">
+                  Interview with AI (Really?)
+                </h1>
+              </div>
+            </div>
+        """
+    )
     
     with gr.Box():
         
@@ -113,12 +72,14 @@ with gr.Blocks(css=css) as demo:
     
         # with gr.Row():
         with gr.Row(elem_id="prompt-container").style(mobile_collapse=False, equal_height=True):
-            with gr.Column(scale=0.85):
+            with gr.Column(scale=0.80):
                 txt = gr.Textbox(
                     show_label=False,
                     placeholder="Type your response and press enter, or record your response",
                 ).style(container=False)
-            with gr.Column(scale=0.15, min_width=0):
+            with gr.Column(scale=0.10, min_width=0):
+                record = gr.Audio(source="microphone", type="filepath", streaming=True)
+            with gr.Column(scale=0.10, min_width=0):
                 submit = gr.Button("Submit")
         # gr.Interface(
         #     fn=transcribe, 
@@ -131,7 +92,7 @@ with gr.Blocks(css=css) as demo:
         #         "state"
         #     ],
         #     live=True)
-    
+
         txt.submit(user, [txt, chatbot], [txt, chatbot], queue=False).then(
             bot, chatbot, chatbot
         )