Initial version of chatbot

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

app.py

@@ -0,0 +1,105 @@
+import gradio as gr
+import base64
+import mimetypes
+
+
+bg_path = "./assets/background_image/living_room.png"
+with open(bg_path, "rb") as f:
+    bg_bytes = f.read()
+bg_base64 = base64.b64encode(bg_bytes).decode("utf-8")
+
+mime_type, _ = mimetypes.guess_type(bg_path)
+if mime_type is None:
+    mime_type = "image/png"
+
+BACKGROUND_CSS = f"""
+.gradio-container {{
+    background-image: url("data:{mime_type};base64,{bg_base64}");
+    background-size: cover !important;
+    background-position: center !important;
+    max-width: 100% !important;
+    height: auto !important;  
+}}
+"""
+
+GLASS_CSS = """
+.glass {
+    background: rgba(255, 255, 255, 0.85) !important;
+    border-radius: 16px !important;
+    padding: 8px !important;
+}
+"""
+
+USER_INPUT_CSS = """
+#user-input textarea,
+#user-input input {
+    border-radius: 999px !important;
+    border: 2px solid rgba(0, 0, 0, 0.15) !important;
+    padding: 0.6rem 1rem !important;
+    font-size: 0.95rem !important;
+    color: #222 !important;
+    outline: none !important;
+}
+
+#user-input textarea:focus,
+#user-input input:focus {
+    border-color: #4a7cf7 !important;
+    box-shadow: 0 0 0 2px rgba(74, 124, 247, 0.25) !important;
+}
+"""
+
+CSS = BACKGROUND_CSS + \
+      "\n" + GLASS_CSS + \
+      "\n" + USER_INPUT_CSS
+
+
+def respond(message, history, name, job, age, city):
+    history = history or []
+
+    info = (
+        f"Name: {name or '-'}\n"
+        f"Beruf: {job or '-'}\n"
+        f"Alter: {age or '-'}\n"
+        f"Stadt: {city or '-'}"
+    )
+
+    bot_reply = f"Du hast geschrieben: '{message}'.\n\nDeine Angaben:\n{info}"
+    history.append((message, bot_reply))
+    return history, "", "", "", "", ""
+
+
+with gr.Blocks(title="Form + Chat") as demo:
+    with gr.Row():
+        name = gr.Textbox(label="Name", elem_classes=["name-textbox"])
+        job = gr.Textbox(label="Beruf")
+
+    with gr.Row():
+        with gr.Column():
+            age = gr.Textbox(label="Alter")
+            city = gr.Textbox(label="Stadt")
+
+        with gr.Column():
+            chatbot = gr.Chatbot(
+                label="Chat",
+                avatar_images=(
+                    "./assets/chat_icons/person_icon.png",
+                    "./assets/chat_icons/robot_icon.png"
+                ),
+                elem_classes=["glass"]
+            )
+            with gr.Row():
+                chat_input = gr.Textbox(
+                    label="Nachricht",
+                    elem_id="user-input"
+                )
+                submit = gr.Button(
+                    "Submit",
+                    elem_classes=["glass"])
+
+    submit.click(
+        fn=respond,
+        inputs=[chat_input, chatbot, name, job, age, city],
+        outputs=[chatbot, chat_input, name, job, age, city],
+    )
+
+demo.launch(css=CSS)

requirements.txt

@@ -0,0 +1,2 @@
+gradio==4.44.1
+openai==2.8.1