アイコンの追加

app.py

@@ -2,7 +2,6 @@ import gradio as gr
 import openai
 import requests
 import os
-import fileinput
 from dotenv import load_dotenv
 
 title="松原仁美AI(β)"
@@ -83,17 +82,36 @@ class NajiminoAI:
 
     @classmethod
     def generate(cls, user_message):
-        result = OpenAI.chat_completion(prompt=user_message)
+        response = OpenAI.chat_completion(prompt=user_message)
+        result = outputs_label_HTML.format(outputs=response)
         return result
 
+
+outputs_label_HTML = '''
+    <div id="component-0" class="block svelte-90oupt padded" style="border-style: solid; overflow: scroll; min-width: min(160px, 100%); border-width: var(--block-border-width);">
+        <label class="svelte-1kcgrqr container">
+            <img src="/file/static/hitomi-matsubara.png" alt="User Icon" style="width: 50px; height: 50px; border-radius: 50%; float: left; margin-right: 10px;">
+            <span>
+                松原仁美(AI)がお答えします。
+            </span>
+            <textarea data-testid="textbox" class="scroll-hide svelte-1kcgrqr" dir="ltr" placeholder="" rows="4" disabled
+                style="overflow-y: scroll; border-radius: 0 20px 20px 20px; height: 300px; width: calc(100% - 60px);">{outputs}</textarea>
+        </label>
+    </div>
+'''
+
 def main():
     iface = gr.Interface(fn=NajiminoAI.generate,
                         inputs=gr.Textbox(label=inputs_label),
-                        outputs=gr.Textbox(label=outputs_label),
+                        outputs=gr.HTML(outputs_label_HTML.format(outputs="")),
+                        examples=[
+                            "あなたはどこのどなたで、何をされてる方ですか？",
+                            "資産持ちって何ですか？",
+                            "講座について教えてください。",
+                        ],
                         title=title,
                         description=description,
-                        article=article,
-                        allow_flagging='never'
+                        article=article
                         )
 
     iface.launch()