Add full Python AI assistant app

.gitattributes

@@ -33,3 +33,5 @@ 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
+*.svg filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,684 @@
+notes/
+ai-assistant/
+
+# Created by https://www.toptal.com/developers/gitignore/api/java,visualstudiocode,macos,linux,windows,python,visualstudio
+# Edit at https://www.toptal.com/developers/gitignore?templates=java,visualstudiocode,macos,linux,windows,python,visualstudio
+
+### Java ###
+# Compiled class file
+*.class
+
+# Log file
+*.log
+
+# BlueJ files
+*.ctxt
+
+# Mobile Tools for Java (J2ME)
+.mtj.tmp/
+
+# Package Files #
+*.jar
+*.war
+*.nar
+*.ear
+*.zip
+*.tar.gz
+*.rar
+
+# virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
+hs_err_pid*
+replay_pid*
+
+### Linux ###
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### macOS Patch ###
+# iCloud generated files
+*.icloud
+
+### Python ###
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+
+### Python Patch ###
+# Poetry local configuration file - https://python-poetry.org/docs/configuration/#local-configuration
+poetry.toml
+
+# ruff
+.ruff_cache/
+
+# LSP config files
+pyrightconfig.json
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+### VisualStudio ###
+## Ignore Visual Studio temporary files, build results, and
+## files generated by popular Visual Studio add-ons.
+##
+## Get latest from https://github.com/github/gitignore/blob/main/VisualStudio.gitignore
+
+# User-specific files
+*.rsuser
+*.suo
+*.user
+*.userosscache
+*.sln.docstates
+
+# User-specific files (MonoDevelop/Xamarin Studio)
+*.userprefs
+
+# Mono auto generated files
+mono_crash.*
+
+# Build results
+[Dd]ebug/
+[Dd]ebugPublic/
+[Rr]elease/
+[Rr]eleases/
+x64/
+x86/
+[Ww][Ii][Nn]32/
+[Aa][Rr][Mm]/
+[Aa][Rr][Mm]64/
+bld/
+[Bb]in/
+[Oo]bj/
+[Ll]og/
+[Ll]ogs/
+
+# Visual Studio 2015/2017 cache/options directory
+.vs/
+# Uncomment if you have tasks that create the project's static files in wwwroot
+#wwwroot/
+
+# Visual Studio 2017 auto generated files
+Generated\ Files/
+
+# MSTest test Results
+[Tt]est[Rr]esult*/
+[Bb]uild[Ll]og.*
+
+# NUnit
+*.VisualState.xml
+TestResult.xml
+nunit-*.xml
+
+# Build Results of an ATL Project
+[Dd]ebugPS/
+[Rr]eleasePS/
+dlldata.c
+
+# Benchmark Results
+BenchmarkDotNet.Artifacts/
+
+# .NET Core
+project.lock.json
+project.fragment.lock.json
+artifacts/
+
+# ASP.NET Scaffolding
+ScaffoldingReadMe.txt
+
+# StyleCop
+StyleCopReport.xml
+
+# Files built by Visual Studio
+*_i.c
+*_p.c
+*_h.h
+*.ilk
+*.meta
+*.obj
+*.iobj
+*.pch
+*.pdb
+*.ipdb
+*.pgc
+*.pgd
+*.rsp
+*.sbr
+*.tlb
+*.tli
+*.tlh
+*.tmp
+*.tmp_proj
+*_wpftmp.csproj
+*.tlog
+*.vspscc
+*.vssscc
+.builds
+*.pidb
+*.svclog
+*.scc
+
+# Chutzpah Test files
+_Chutzpah*
+
+# Visual C++ cache files
+ipch/
+*.aps
+*.ncb
+*.opendb
+*.opensdf
+*.sdf
+*.cachefile
+*.VC.db
+*.VC.VC.opendb
+
+# Visual Studio profiler
+*.psess
+*.vsp
+*.vspx
+*.sap
+
+# Visual Studio Trace Files
+*.e2e
+
+# TFS 2012 Local Workspace
+$tf/
+
+# Guidance Automation Toolkit
+*.gpState
+
+# ReSharper is a .NET coding add-in
+_ReSharper*/
+*.[Rr]e[Ss]harper
+*.DotSettings.user
+
+# TeamCity is a build add-in
+_TeamCity*
+
+# DotCover is a Code Coverage Tool
+*.dotCover
+
+# AxoCover is a Code Coverage Tool
+.axoCover/*
+!.axoCover/settings.json
+
+# Coverlet is a free, cross platform Code Coverage Tool
+coverage*.json
+coverage*.xml
+coverage*.info
+
+# Visual Studio code coverage results
+*.coverage
+*.coveragexml
+
+# NCrunch
+_NCrunch_*
+.*crunch*.local.xml
+nCrunchTemp_*
+
+# MightyMoose
+*.mm.*
+AutoTest.Net/
+
+# Web workbench (sass)
+.sass-cache/
+
+# Installshield output folder
+[Ee]xpress/
+
+# DocProject is a documentation generator add-in
+DocProject/buildhelp/
+DocProject/Help/*.HxT
+DocProject/Help/*.HxC
+DocProject/Help/*.hhc
+DocProject/Help/*.hhk
+DocProject/Help/*.hhp
+DocProject/Help/Html2
+DocProject/Help/html
+
+# Click-Once directory
+publish/
+
+# Publish Web Output
+*.[Pp]ublish.xml
+*.azurePubxml
+# Note: Comment the next line if you want to checkin your web deploy settings,
+# but database connection strings (with potential passwords) will be unencrypted
+*.pubxml
+*.publishproj
+
+# Microsoft Azure Web App publish settings. Comment the next line if you want to
+# checkin your Azure Web App publish settings, but sensitive information contained
+# in these scripts will be unencrypted
+PublishScripts/
+
+# NuGet Packages
+*.nupkg
+# NuGet Symbol Packages
+*.snupkg
+# The packages folder can be ignored because of Package Restore
+**/[Pp]ackages/*
+# except build/, which is used as an MSBuild target.
+!**/[Pp]ackages/build/
+# Uncomment if necessary however generally it will be regenerated when needed
+#!**/[Pp]ackages/repositories.config
+# NuGet v3's project.json files produces more ignorable files
+*.nuget.props
+*.nuget.targets
+
+# Microsoft Azure Build Output
+csx/
+*.build.csdef
+
+# Microsoft Azure Emulator
+ecf/
+rcf/
+
+# Windows Store app package directories and files
+AppPackages/
+BundleArtifacts/
+Package.StoreAssociation.xml
+_pkginfo.txt
+*.appx
+*.appxbundle
+*.appxupload
+
+# Visual Studio cache files
+# files ending in .cache can be ignored
+*.[Cc]ache
+# but keep track of directories ending in .cache
+!?*.[Cc]ache/
+
+# Others
+ClientBin/
+~$*
+*.dbmdl
+*.dbproj.schemaview
+*.jfm
+*.pfx
+*.publishsettings
+orleans.codegen.cs
+
+# Including strong name files can present a security risk
+# (https://github.com/github/gitignore/pull/2483#issue-259490424)
+#*.snk
+
+# Since there are multiple workflows, uncomment next line to ignore bower_components
+# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
+#bower_components/
+
+# RIA/Silverlight projects
+Generated_Code/
+
+# Backup & report files from converting an old project file
+# to a newer Visual Studio version. Backup files are not needed,
+# because we have git ;-)
+_UpgradeReport_Files/
+Backup*/
+UpgradeLog*.XML
+UpgradeLog*.htm
+ServiceFabricBackup/
+*.rptproj.bak
+
+# SQL Server files
+*.mdf
+*.ldf
+*.ndf
+
+# Business Intelligence projects
+*.rdl.data
+*.bim.layout
+*.bim_*.settings
+*.rptproj.rsuser
+*- [Bb]ackup.rdl
+*- [Bb]ackup ([0-9]).rdl
+*- [Bb]ackup ([0-9][0-9]).rdl
+
+# Microsoft Fakes
+FakesAssemblies/
+
+# GhostDoc plugin setting file
+*.GhostDoc.xml
+
+# Node.js Tools for Visual Studio
+.ntvs_analysis.dat
+node_modules/
+
+# Visual Studio 6 build log
+*.plg
+
+# Visual Studio 6 workspace options file
+*.opt
+
+# Visual Studio 6 auto-generated workspace file (contains which files were open etc.)
+*.vbw
+
+# Visual Studio 6 auto-generated project file (contains which files were open etc.)
+*.vbp
+
+# Visual Studio 6 workspace and project file (working project files containing files to include in project)
+*.dsw
+*.dsp
+
+# Visual Studio 6 technical files
+
+# Visual Studio LightSwitch build output
+**/*.HTMLClient/GeneratedArtifacts
+**/*.DesktopClient/GeneratedArtifacts
+**/*.DesktopClient/ModelManifest.xml
+**/*.Server/GeneratedArtifacts
+**/*.Server/ModelManifest.xml
+_Pvt_Extensions
+
+# Paket dependency manager
+.paket/paket.exe
+paket-files/
+
+# FAKE - F# Make
+.fake/
+
+# CodeRush personal settings
+.cr/personal
+
+# Python Tools for Visual Studio (PTVS)
+*.pyc
+
+# Cake - Uncomment if you are using it
+# tools/**
+# !tools/packages.config
+
+# Tabs Studio
+*.tss
+
+# Telerik's JustMock configuration file
+*.jmconfig
+
+# BizTalk build output
+*.btp.cs
+*.btm.cs
+*.odx.cs
+*.xsd.cs
+
+# OpenCover UI analysis results
+OpenCover/
+
+# Azure Stream Analytics local run output
+ASALocalRun/
+
+# MSBuild Binary and Structured Log
+*.binlog
+
+# NVidia Nsight GPU debugger configuration file
+*.nvuser
+
+# MFractors (Xamarin productivity tool) working folder
+.mfractor/
+
+# Local History for Visual Studio
+.localhistory/
+
+# Visual Studio History (VSHistory) files
+.vshistory/
+
+# BeatPulse healthcheck temp database
+healthchecksdb
+
+# Backup folder for Package Reference Convert tool in Visual Studio 2017
+MigrationBackup/
+
+# Ionide (cross platform F# VS Code tools) working folder
+.ionide/
+
+# Fody - auto-generated XML schema
+FodyWeavers.xsd
+
+# VS Code files for those working on multiple tools
+*.code-workspace
+
+# Local History for Visual Studio Code
+
+# Windows Installer files from build outputs
+
+# JetBrains Rider
+*.sln.iml
+
+### VisualStudio Patch ###
+# Additional files built by Visual Studio
+
+# End of https://www.toptal.com/developers/gitignore/api/java,visualstudiocode,macos,linux,windows,python,visualstudio

Dockerfile

@@ -0,0 +1,18 @@
+# Use official Python base image
+FROM python:3.12-slim
+
+# Set working directory
+WORKDIR /app
+
+# Copy project files
+COPY . /app
+
+# Install dependencies
+RUN pip install --no-cache-dir --upgrade pip
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Expose the port (Spaces expects 7860 or 5000)
+EXPOSE 7860
+
+# Start the FastAPI app with uvicorn
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Yauheniya AI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,12 +1,86 @@
----
-title: Ai Assistant
-emoji: 🐨
-colorFrom: green
-colorTo: red
-sdk: docker
-pinned: false
-license: mit
-short_description: A web-based AI assistant built with FastAPI and Hugging Face
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Python AI Assistant
+
+This is a web-based AI assistant built with FastAPI and Hugging Face Inference API. The app allows users to interact with multiple AI models, either by chatting with text models or generating images with image models.
+
+<div style="text-align:center;">
+  <img src="./Screenshot.png" style="width:100%; max-width:1200px;">
+  <p><em>Fig. 1: Screenshot of the Python AI Assistant interface.</em></p>
+</div>
+
+## Features
+
+- Chat with various text-based AI models.
+- Generate images using a text prompt.
+- Dynamic model selection from a dropdown menu.
+- Inline chat interface showing user questions and AI responses.
+- Supports both text and image output.
+- Base64-encoded images are displayed directly in the chat window.
+
+## Available Models
+
+- **DeepSeek-V3-0324**: Text-based AI model for general-purpose conversation and responses.
+
+- **Llama-3.2-3B-Instruct**: Instruction-tuned text model suitable for chat and instruction tasks.
+
+- **GLM-4.5-Air**: Multilingual text model optimized for instruction following and efficiency.
+
+- **FLUX.1-dev**: Generates images based on text prompts.
+
+## Structure
+
+```text
+python-ai-assistant/
+├── main.py                  # FastAPI app entry point with routes and endpoints
+├── models/                  # Contains model definitions
+│   ├── __init__.py          # Marks 'models' as a Python package
+│   └── request_models.py    # Defines available AI models and their metadata
+├── services/                # Contains service logic
+│   ├── __init__.py          # Marks 'services' as a Python package
+│   └── ai_assistant.py      # Core logic for interacting with Hugging Face models
+├── static/                  # Frontend assets
+│   ├── css/
+│   │   └── styles.css       # All CSS styles for the chat interface
+│   ├── images/
+│   │   └── models/          # Icons for each AI model in the dropdown
+│   └── index.html           # Main frontend page for the chat interface
+├── README.md                # Project documentation, usage, and models list
+└── requirements.txt         # Python dependencies for the project
+```
+
+
+## Installation
+
+1. Clone the repository:
+   ```bash
+   git clone <repository-url>
+   cd python-ai-assistant
+   ```
+
+2. Create a virtual environment and install dependencies:
+    ```bash
+    uv venv --python 3.12
+    source .venv/bin/activate
+    uv pip install -r requirements.txt
+    ```
+
+3. Create a .env file with your Hugging Face API token:
+    ```text
+    HUGGINGFACE_API_TOKEN=your_token_here
+    ```
+
+4. Start the app:
+    ```bash
+    uvicorn main:app --reload
+    ```
+
+5. Open your browser at http://127.0.0.1:8000.
+
+## Usage
+- Select a model from the dropdown menu at the top.
+- Type your question or prompt in the input box.
+- Click the send button or press Enter to submit.
+- Text responses appear directly in the chat. Image responses are displayed in-line and can be saved.
+
+## Notes
+The app differentiates between text models and image models for proper rendering.
+Only models available via Hugging Face Inference API are supported.

main.py

@@ -0,0 +1,26 @@
+from fastapi import FastAPI
+from fastapi.responses import HTMLResponse, PlainTextResponse
+from fastapi.staticfiles import StaticFiles
+from models.request_models import AskRequest
+#from services.openai_assistant import OpenAIAssistantService
+from services.ai_assistant import HuggingFaceAssistantService
+from fastapi.responses import JSONResponse
+
+app = FastAPI()
+
+# Mount static files (UI assets from Java project)
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+# Service instance
+assistant_service = HuggingFaceAssistantService()
+
+
+@app.post("/ask")
+async def ask(request: AskRequest):
+    result = await assistant_service.ask(request.question, request.model)
+    return JSONResponse(content=result)
+
+@app.get("/", response_class=HTMLResponse)
+async def serve_index():
+    with open("static/index.html") as f:
+        return f.read()

models/request_models.py

@@ -0,0 +1,5 @@
+from pydantic import BaseModel
+
+class AskRequest(BaseModel):
+    question: str
+    model: str | None = None

requirements.txt

@@ -0,0 +1,7 @@
+fastapi
+uvicorn
+python-dotenv
+openai
+huggingface_hub
+huggingface_hub[cli]
+Pillow==11.3.0

services/ai_assistant.py

@@ -0,0 +1,40 @@
+# services/ai_assistant.py
+import io
+import base64
+import os
+import asyncio
+from dotenv import load_dotenv
+from huggingface_hub import InferenceClient
+
+load_dotenv()
+
+class HuggingFaceAssistantService:
+    def __init__(self):
+        token = os.getenv("HUGGINGFACE_API_TOKEN")
+        if not token:
+            raise RuntimeError("HUGGINGFACE_API_TOKEN not set")
+        self.client = InferenceClient(api_key=token)
+
+    async def ask(self, question: str, model: str | None):
+        model_repo = model or "meta-llama/Llama-3.2-3B-Instruct"
+
+        if model_repo.startswith("black-forest-labs/"):
+            # Generate image in a thread
+            image = await asyncio.to_thread(
+                self.client.text_to_image,
+                prompt=question,
+                model=model_repo
+            )
+            # Convert to base64
+            buf = io.BytesIO()
+            image.save(buf, format="PNG")
+            img_b64 = base64.b64encode(buf.getvalue()).decode("utf-8")
+            return {"type": "image", "content": img_b64}
+
+        else:
+            completion = await asyncio.to_thread(
+                self.client.chat.completions.create,
+                model=model_repo,
+                messages=[{"role": "user", "content": question}]
+            )
+            return {"type": "text", "content": completion.choices[0].message.content}

static/css/styles.css

@@ -0,0 +1,116 @@
+:root {
+    --max-w: 800px;
+    --bg: #ffffff;
+    --panel: #f7f7f7;
+    --muted: #767676;
+    --accent: #000;
+    --rounded: 12px;
+}
+html,body { height:100%; margin:0; font-family: Inter, Arial, sans-serif; background:var(--bg); color:#111; }
+.outer { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px; box-sizing:border-box; }
+.container {
+    width:100%; max-width:var(--max-w);
+    display:flex; flex-direction:column;
+    gap:16px;
+}
+
+/* header */
+.top-bar { display:flex; align-items:center; gap:12px; }
+.model-select {
+    position:relative;
+    display:inline-flex;
+    align-items:center;
+    gap:10px;
+    padding:10px 14px;
+    border-radius:10px;
+    background:#f2f2f2;
+    border:1px solid #e6e6e6;
+    cursor:pointer;
+    min-width:220px;
+    box-shadow:0 0 0 0 rgba(0,0,0,0);
+}
+.model-select .selected {
+    display:flex; align-items:center; gap:10px;
+}
+    .model-select .meta {
+        display:flex;
+        flex-direction:column;
+    }
+.model-select img { width:32px; height:32px; border-radius:6px; object-fit:cover; }
+.model-select .name { font-weight:600; font-size:14px; }
+.model-select .note { font-size:12px; color:var(--muted); margin-left:6px; font-weight:500; }
+
+/* dropdown list */
+.dropdown {
+    position:absolute;
+    top:calc(100% + 8px);
+    left:0;
+    right:auto;
+    background:white;
+    border-radius:10px;
+    box-shadow:0 6px 18px rgba(0,0,0,0.08);
+    border:1px solid #eee;
+    overflow:hidden;
+    z-index:30;
+    max-height:360px;
+        overflow-y: auto;
+    width:250px;
+}
+.dropdown .item {
+    display:flex; align-items:center; gap:10px;
+    padding:10px 12px; cursor:pointer;
+}
+.dropdown .item:hover { background:#fafafa; }
+.dropdown .item .meta { display:flex; flex-direction:column; }
+.dropdown .item .title { font-weight:600; font-size:13px; }
+.dropdown .item .sub { font-size:12px; color:var(--muted); }
+
+/* chat area */
+.chat-box {
+    background:var(--panel);
+    padding:20px;
+    border-radius:var(--rounded);
+    min-height:720px;
+    max-height:56vh;
+    overflow:auto;
+    display:flex;
+    flex-direction:column;
+    gap:12px;
+}
+.message { max-width:72%; padding:12px 14px; border-radius:12px; }
+.user { margin-left:auto; background:white; border:1px solid #f1d8f8; }
+.assistant { margin-right:auto; background:white; border:1px solid #ececec; }
+
+/* input area */
+.input-row {
+    display:flex; gap:10px; align-items:center;
+}
+    .input {
+        flex: 1;
+        background: white;
+        border-radius: 24px;
+        border: 1px solid #ddd;
+        padding: 12px 24px;
+        box-sizing: border-box;   /* VERY IMPORTANT */
+        min-height: 48px;
+        max-height: 200px;        /* limit expansion */
+        overflow-y: auto;         /* show scroll after max-height */
+        resize: none;
+        outline: none;
+        font-size: 18px;
+        line-height: 1.5;         /* slightly bigger line spacing */
+    }
+
+
+.send-btn {
+    width:44px; height:44px; border-radius:50%;
+    background:var(--accent); color:white; display:inline-flex;
+    align-items:center; justify-content:center; border:none; cursor:pointer;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
+}
+.note-footer {
+    text-align:center; color:var(--muted); font-size:13px; margin-top:6px;
+}
+
+/* small helpers */
+.small { font-size:12px; color:var(--muted); }

static/index.html

@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>AI Assistant</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <link rel="stylesheet" href="/static/css/styles.css">
+</head>
+<body>
+  <div class="outer">
+    <div class="container">
+
+      <!-- top bar: model dropdown left -->
+      <div class="top-bar">
+        <div id="modelSelector" class="model-select" tabindex="0" aria-haspopup="listbox">
+          <div class="selected">
+            <img id="selectedIcon" src="./static/images/models/DeepSeek.svg" alt="model"/>
+            <div class="meta">
+              <div class="name" id="selectedName">DeepSeek V3</div>
+              <div class="note small" id="selectedNote"  ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- chat -->
+      <div id="chatBox" class="chat-box"></div>
+
+      <!-- input -->
+      <div class="input-row">
+        <textarea id="inputText" class="input" rows="1" placeholder="Ask anything"></textarea>
+        <button id="sendBtn" class="send-btn" title="Send">➤</button>
+      </div>
+
+      <div class="note-footer">A minimal AI assistant to generate text and images.</div>
+    </div>
+  </div>
+
+  <!-- dropdown template (hidden until used) -->
+  <div id="dropdownTemplate" style="display:none">
+    <div class="dropdown" id="modelDropdown" role="listbox" aria-label="Models"></div>
+  </div>
+
+  <script>
+    const models = [ 
+    {
+        id: "deepseek-ai/DeepSeek-V3-0324",
+        display: "DeepSeek-V3-0324",
+        icon: "DeepSeek.svg",
+        note: "Text model"
+    },
+    {
+        id: "meta-llama/Llama-3.2-3B-Instruct",
+        display: "Llama-3.2-3B-Instruct",
+        icon: "Meta.svg",
+        note: "Text model"
+    },
+    {
+        id: "zai-org/GLM-4.5-Air",
+        display: "GLM-4.5-Air",
+        icon: "Zai.svg",
+        note: "Text model"
+    },
+    {
+        id: "black-forest-labs/FLUX.1-dev",
+        display: "FLUX.1-dev",
+        icon: "bfl.svg",
+        note: "Image model"
+    },
+    ];
+
+
+    // build dropdown
+    const modelSelector = document.getElementById('modelSelector');
+    const dropdown = document.createElement('div');
+    dropdown.className = 'dropdown';
+    dropdown.style.display = 'none';
+    document.body.appendChild(dropdown);
+
+    function buildList() {
+    dropdown.innerHTML = '';
+    models.forEach(m => {
+        const item = document.createElement('div');
+        item.className = 'item';
+        item.tabIndex = 0;
+
+        item.innerHTML = `
+        <img src="./static/images/models/${m.icon}" alt="${m.display}" 
+            style="width:36px;height:36px;border-radius:6px;object-fit:cover;margin-right:8px;">
+        <div class="meta">
+            <div class="title">${m.display}</div>
+            <div class="sub">${m.note || ''}</div>
+        </div>
+        `;
+
+        item.addEventListener('click', () => {
+        selectModel(m);
+        hideDropdown();
+        document.getElementById('inputText').focus();
+        });
+
+        dropdown.appendChild(item);
+    });
+    }
+
+    function showDropdown() {
+      buildList();
+      const rect = modelSelector.getBoundingClientRect();
+      dropdown.style.left = rect.left + 'px';
+      dropdown.style.top = (rect.bottom + 8) + 'px';
+      dropdown.style.display = 'block';
+    }
+    function hideDropdown() { dropdown.style.display = 'none'; }
+
+    // selection
+    let currentModel = models[0];
+    function selectModel(m) {
+      currentModel = m;
+      document.getElementById('selectedIcon').src = './static/images/models/' + m.icon;
+      document.getElementById('selectedName').innerText = m.display;
+      if (m.id.startsWith("black-forest-labs/")) {
+        document.getElementById('selectedNote').innerText = "■ " + (m.note || "");
+      } else {
+        document.getElementById('selectedNote').innerText = "文 " + (m.note || "");
+      }
+    }
+
+    modelSelector.addEventListener('click', () => {
+      if (dropdown.style.display === 'block') hideDropdown(); else showDropdown();
+    });
+
+    document.addEventListener('click', (e) => {
+      if (!modelSelector.contains(e.target) && !dropdown.contains(e.target)) hideDropdown();
+    });
+
+    // init
+    selectModel(currentModel);
+
+    // chat logic: send question + model to /ask
+    const sendBtn = document.getElementById('sendBtn');
+    const inputText = document.getElementById('inputText');
+    const chatBox = document.getElementById('chatBox');
+
+		function autoResizeTextarea() {
+			this.style.height = 'auto';                    // reset height
+			this.style.height = Math.min(this.scrollHeight, 200) + 'px'; // respect max-height
+		}
+		inputText.addEventListener('input', autoResizeTextarea);
+
+    async function sendQuestion() {
+      const question = inputText.value.trim();
+      if (!question) return;
+
+      // show user bubble
+      const um = document.createElement('div');
+      um.className = 'message user';
+      um.innerText = question;
+      chatBox.appendChild(um);
+      inputText.value = '';
+      chatBox.scrollTop = chatBox.scrollHeight;
+
+      try {
+        const res = await fetch('/ask', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ question, model: currentModel.id })
+        });
+
+        const data = await res.json(); // parse JSON from backend
+        const am = document.createElement('div');
+        am.className = 'message assistant';
+
+        if (data.type === "text") {
+          am.innerText = data.content;
+        } else if (data.type === "image") {
+          const img = document.createElement('img');
+          img.src = "data:image/png;base64," + data.content;
+          img.style.maxWidth = "100%";
+          img.style.borderRadius = "8px";
+
+          // 👇 Add download link
+          const link = document.createElement('a');
+          link.href = img.src;
+          link.download = "Image.png"; // default filename instead of "Unknown"
+          link.innerText = "💾";
+          link.style.display = "block";
+          link.style.marginTop = "4px";
+
+          am.appendChild(img);
+          am.appendChild(link); // add link below the image
+        } else {
+          am.innerText = "⚠️ Unknown response type";
+        }
+
+        chatBox.appendChild(am);
+        chatBox.scrollTop = chatBox.scrollHeight;
+      } catch (err) {
+        const am = document.createElement('div');
+        am.className = 'message assistant';
+        am.innerText = 'Error: ' + (err.message || err);
+        chatBox.appendChild(am);
+        chatBox.scrollTop = chatBox.scrollHeight;
+      }
+    }
+
+    sendBtn.addEventListener('click', sendQuestion);
+    inputText.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendQuestion(); } });
+  </script>
+</body>
+</html>