├── static
    ├── icon.png
    ├── event-listener.js
    ├── chat.js
    └── main.css
├── .env.example
├── requirements.txt
├── README.md
├── app.py
├── .gitignore
├── templates
    └── index.html
└── LICENSE


/static/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google-gemini/gemini-api-quickstart/HEAD/static/icon.png


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | # Get your Gemini API key from: https://aistudio.google.com/app/apikey
2 | GOOGLE_API_KEY=
3 | 


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
 1 | annotated-types==0.6.0
 2 | blinker==1.8.2
 3 | cachetools==5.3.3
 4 | certifi==2024.7.4
 5 | charset-normalizer==3.3.2
 6 | click==8.1.7
 7 | Flask==3.0.3
 8 | google-ai-generativelanguage==0.6.2
 9 | google-api-core==2.19.0
10 | google-api-python-client==2.127.0
11 | google-auth==2.29.0
12 | google-auth-httplib2==0.2.0
13 | google-genai==1.10.0
14 | googleapis-common-protos==1.63.0
15 | grpcio==1.63.0
16 | grpcio-status==1.62.2
17 | httplib2==0.22.0
18 | idna==3.7
19 | itsdangerous==2.2.0
20 | Jinja2==3.1.5
21 | MarkupSafe==2.1.5
22 | pillow==10.3.0
23 | proto-plus==1.23.0
24 | protobuf==4.25.3
25 | pyasn1==0.6.0
26 | pyasn1_modules==0.4.0
27 | pydantic==2.7.1
28 | pydantic_core==2.18.2
29 | pyparsing==3.1.2
30 | python-dotenv==1.0.1
31 | requests==2.32.2
32 | rsa==4.9
33 | tqdm==4.66.4
34 | typing_extensions==4.11.0
35 | uritemplate==4.1.1
36 | urllib3==2.2.2
37 | Werkzeug==3.0.6
38 | 


--------------------------------------------------------------------------------
/static/event-listener.js:
--------------------------------------------------------------------------------
 1 | document.getElementById("file-upload").addEventListener("change", function (event) {
 2 |     const file = event.target.files[0];
 3 |     if (!file) {
 4 |         return;
 5 |     }
 6 |     const formData = new FormData();
 7 |     formData.append("file", file);
 8 | 
 9 |     fetch("/upload", {
10 |         method: "POST",
11 |         body: formData,
12 |     })
13 |         .then((response) => response.json())
14 |         .then((data) => {
15 |             if (data.success) {
16 |                 // Update and show the banner
17 |                 const banner = document.getElementById("upload-banner");
18 |                 banner.textContent = data.message;
19 |                 banner.style.display = "block";
20 | 
21 |                 // Hide the banner after 3 seconds
22 |                 setTimeout(() => {
23 |                     banner.style.display = "none";
24 |                 }, 3000);
25 | 
26 |                 fetch("/get_files")
27 |                     .then((response) => response.json())
28 |                     .then((data) => {
29 |                         populateFiles(data.assistant_files);
30 |                     });
31 |             } else {
32 |                 console.error("Upload failed:", data.message);
33 |                 // Update and show the banner
34 |                 const banner = document.getElementById("upload-banner");
35 |                 banner.textContent = data.message;
36 |                 banner.style.display = "block";
37 |                 banner.style.color = "red";
38 | 
39 |                 // Hide the banner after 3 seconds
40 |                 setTimeout(() => {
41 |                     banner.style.display = "none";
42 |                 }, 3500);
43 |             }
44 |         })
45 |         .catch((error) => {
46 |             console.error("Error uploading file:", error);
47 |         });
48 | });


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Gemini API Quickstart - Python
 2 | 
 3 | This repository contains a simple Python Flask App running with the Google AI Gemini API, designed to get you started building with Gemini's multi-modal capabilities. The app comes with a basic UI and a Flask backend.
 4 | 
 5 | <img width="1271" alt="Screenshot 2024-05-07 at 7 42 28 AM" src="https://github.com/logankilpatrick/gemini-api-quickstart/assets/35577566/156ae3e0-cffa-47a3-8a71-1bded78c4632">
 6 | 
 7 | ## Basic request
 8 | 
 9 | To send your first API request with the [Google Gen AI SDK](https://ai.google.dev/gemini-api/docs/libraries#python), make sure you have the right dependencies installed (see installation steps below) and then run the following code:
10 | 
11 | ```python
12 | from google import genai
13 | 
14 | client = genai.Client(api_key="GEMINI_API_KEY")
15 | chat = client.chats.create(model="gemini-2.0-flash")
16 | 
17 | response = chat.send_message("Hello world!")
18 | print(response.text)
19 | 
20 | response = chat.send_message("Explain to me how AI works")
21 | print(response.text)
22 | 
23 | for message in chat.get_history():
24 |     print(f'role - {message.role}',end=": ")
25 |     print(message.parts[0].text)
26 | ```
27 | 
28 | ## Setup
29 | 
30 | 1. If you don’t have Python installed, install it [from Python.org](https://www.python.org/downloads/).
31 | 
32 | 2. [Clone](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) this repository.
33 | 
34 | 3. Create a new virtual environment:
35 | 
36 |    - macOS:
37 |      ```bash
38 |      $ python -m venv venv
39 |      $ . venv/bin/activate
40 |      ```
41 | 
42 |    - Windows:
43 |      ```cmd
44 |      > python -m venv venv
45 |      > .\venv\Scripts\activate
46 |      ```
47 | 
48 |    - Linux:
49 |       ```bash
50 |       $ python -m venv venv
51 |       $ source venv/bin/activate
52 |       ```
53 | 
54 | 4. Install the requirements:
55 | 
56 |    ```bash
57 |    $ pip install -r requirements.txt
58 |    ```
59 | 
60 | 5. Make a copy of the example environment variables file:
61 | 
62 |    ```bash
63 |    $ cp .env.example .env
64 |    ```
65 | 
66 | 6. Add your [API key](https://ai.google.dev/gemini-api/docs/api-key) to the newly created `.env` file or as an environment variable.
67 | 
68 | 7. Run the app:
69 | 
70 | ```bash
71 | $ flask run
72 | ```
73 | 
74 | You should now be able to access the app from your browser at the following URL: [http://localhost:5000](http://localhost:5000)!
75 | 


--------------------------------------------------------------------------------
/static/chat.js:
--------------------------------------------------------------------------------
 1 | document.querySelector("form").addEventListener("submit", function (event) {
 2 |     event.preventDefault();
 3 |     const messageInput = document.querySelector(
 4 |         'textarea[name="message"]'
 5 |     );
 6 |     const message = messageInput.value.trim();
 7 |     const chatContainer = document.querySelector(".messages");
 8 | 
 9 |     // Append the user's message to the chat container
10 |     if (message) {
11 |         const roleDiv = document.createElement("div");
12 |         roleDiv.classList.add("message-role");
13 |         roleDiv.classList.add("user");
14 | 
15 |         roleDiv.textContent = "User";
16 |         chatContainer.appendChild(roleDiv);
17 | 
18 |         const userMessageDiv = document.createElement("div");
19 |         userMessageDiv.classList.add("user-message");
20 |         userMessageDiv.textContent = message;
21 |         chatContainer.appendChild(userMessageDiv);
22 |     }
23 | 
24 |     // Clear the message input
25 |     messageInput.value = "";
26 | 
27 |     // Send the user's message to the server using AJAX
28 |     fetch("/chat", {
29 |         method: "POST",
30 |         headers: {
31 |             "Content-Type": "application/json",
32 |         },
33 |         body: JSON.stringify({ message: message }),
34 |     })
35 |         .then((response) => response.json())
36 |         .then((data) => {
37 |             if (data.success) {
38 |                 const roleDiv = document.createElement("div");
39 |                 roleDiv.classList.add("message-role");
40 |                 roleDiv.classList.add("assistant");
41 | 
42 |                 roleDiv.textContent = "Model";
43 |                 chatContainer.appendChild(roleDiv);
44 | 
45 |                 // Prepare the model message container
46 |                 const assistantMessageDiv = document.createElement("div");
47 |                 assistantMessageDiv.classList.add("assistant-message");
48 |                 chatContainer.appendChild(assistantMessageDiv);
49 | 
50 |                 // Open a connection to receive streamed responses
51 |                 const eventSource = new EventSource("/stream");
52 |                 eventSource.onmessage = function (event) {
53 |                     const currentText = assistantMessageDiv.textContent;
54 |                     const newText = event.data;
55 |                     const lastChar = currentText.slice(-1);
56 | 
57 |                     // Check if we need to add a space (streamed chunks might be missing it)
58 |                     if (/[.,!?]/.test(lastChar) && newText.charAt(0) !== " ") {
59 |                         assistantMessageDiv.textContent += " " + newText;
60 |                     } else {
61 |                         assistantMessageDiv.textContent += newText;
62 |                     }
63 | 
64 |                     // Scroll to the bottom of the chat container
65 |                     chatContainer.scrollTop = chatContainer.scrollHeight;
66 |                 };
67 |                 eventSource.onerror = function () {
68 |                     eventSource.close();
69 |                 };
70 |             }
71 |         });
72 | });


--------------------------------------------------------------------------------
/app.py:
--------------------------------------------------------------------------------
  1 | from flask import (
  2 |     Flask,
  3 |     render_template,
  4 |     request,
  5 |     Response,
  6 |     stream_with_context,
  7 |     jsonify,
  8 | )
  9 | from werkzeug.utils import secure_filename
 10 | from PIL import Image
 11 | import io
 12 | from dotenv import load_dotenv
 13 | import os
 14 | 
 15 | from google import genai
 16 | 
 17 | # Load environment variables from .env file
 18 | load_dotenv()
 19 | 
 20 | ALLOWED_EXTENSIONS = {"png", "jpg", "jpeg"}
 21 | 
 22 | client = genai.Client(api_key=os.getenv("GOOGLE_API_KEY"))
 23 | chat_session = client.chats.create(model="gemini-2.0-flash")
 24 | 
 25 | app = Flask(__name__, static_folder='static', template_folder='templates')
 26 | 
 27 | next_message = ""
 28 | next_image = ""
 29 | 
 30 | 
 31 | def allowed_file(filename):
 32 |     """Returns if a filename is supported via its extension"""
 33 |     _, ext = os.path.splitext(filename)
 34 |     return ext.lstrip('.').lower() in ALLOWED_EXTENSIONS
 35 | 
 36 | 
 37 | @app.route("/upload", methods=["POST"])
 38 | def upload_file():
 39 |     """Takes in a file, checks if it is valid,
 40 |     and saves it for the next request to the API
 41 |     """
 42 |     global next_image
 43 | 
 44 |     if "file" not in request.files:
 45 |         return jsonify(success=False, message="No file part")
 46 | 
 47 |     file = request.files["file"]
 48 | 
 49 |     if file.filename == "":
 50 |         return jsonify(success=False, message="No selected file")
 51 |     if file and allowed_file(file.filename):
 52 |         filename = secure_filename(file.filename)
 53 | 
 54 |         # Read the file stream into a BytesIO object
 55 |         file_stream = io.BytesIO(file.read())
 56 |         file_stream.seek(0)
 57 |         next_image = Image.open(file_stream)
 58 | 
 59 |         return jsonify(
 60 |             success=True,
 61 |             message="File uploaded successfully and added to the conversation",
 62 |             filename=filename,
 63 |         )
 64 |     return jsonify(success=False, message="File type not allowed")
 65 | 
 66 | 
 67 | @app.route("/", methods=["GET"])
 68 | def index():
 69 |     """Renders the main homepage for the app"""
 70 |     return render_template("index.html", chat_history=chat_session.get_history())
 71 | 
 72 | 
 73 | @app.route("/chat", methods=["POST"])
 74 | def chat():
 75 |     """
 76 |     Takes in the message the user wants to send
 77 |     to the Gemini API, saves it
 78 |     """
 79 |     global next_message
 80 |     next_message = request.json["message"]
 81 |     print(chat_session.get_history())
 82 | 
 83 |     return jsonify(success=True)
 84 | 
 85 | 
 86 | @app.route("/stream", methods=["GET"])
 87 | def stream():
 88 |     """
 89 |     Streams the response from the server for
 90 |     both multi-modal and plain text requests
 91 |     """
 92 |     def generate():
 93 |         global next_message
 94 |         global next_image
 95 |         assistant_response_content = ""
 96 | 
 97 |         if next_image != "":
 98 |             response = chat_session.send_message_stream([next_message, next_image])
 99 |             next_image = ""
100 |         else:
101 |             response = chat_session.send_message_stream(next_message)
102 |             next_message = ""
103 | 
104 |         for chunk in response:
105 |             assistant_response_content += chunk.text
106 |             yield f"data: {chunk.text}\n\n"
107 | 
108 |     return Response(stream_with_context(generate()),
109 |                     mimetype="text/event-stream")
110 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Byte-compiled / optimized / DLL files
  2 | __pycache__/
  3 | *.py[cod]
  4 | *$py.class
  5 | 
  6 | # C extensions
  7 | *.so
  8 | 
  9 | # Distribution / packaging
 10 | .Python
 11 | build/
 12 | develop-eggs/
 13 | dist/
 14 | downloads/
 15 | eggs/
 16 | .eggs/
 17 | lib/
 18 | lib64/
 19 | parts/
 20 | sdist/
 21 | var/
 22 | wheels/
 23 | share/python-wheels/
 24 | *.egg-info/
 25 | .installed.cfg
 26 | *.egg
 27 | MANIFEST
 28 | 
 29 | # PyInstaller
 30 | #  Usually these files are written by a python script from a template
 31 | #  before PyInstaller builds the exe, so as to inject date/other infos into it.
 32 | *.manifest
 33 | *.spec
 34 | 
 35 | # Installer logs
 36 | pip-log.txt
 37 | pip-delete-this-directory.txt
 38 | 
 39 | # Unit test / coverage reports
 40 | htmlcov/
 41 | .tox/
 42 | .nox/
 43 | .coverage
 44 | .coverage.*
 45 | .cache
 46 | nosetests.xml
 47 | coverage.xml
 48 | *.cover
 49 | *.py,cover
 50 | .hypothesis/
 51 | .pytest_cache/
 52 | cover/
 53 | 
 54 | # Translations
 55 | *.mo
 56 | *.pot
 57 | 
 58 | # Django stuff:
 59 | *.log
 60 | local_settings.py
 61 | db.sqlite3
 62 | db.sqlite3-journal
 63 | 
 64 | # Flask stuff:
 65 | instance/
 66 | .webassets-cache
 67 | 
 68 | # Scrapy stuff:
 69 | .scrapy
 70 | 
 71 | # Sphinx documentation
 72 | docs/_build/
 73 | 
 74 | # PyBuilder
 75 | .pybuilder/
 76 | target/
 77 | 
 78 | # Jupyter Notebook
 79 | .ipynb_checkpoints
 80 | 
 81 | # IPython
 82 | profile_default/
 83 | ipython_config.py
 84 | 
 85 | # pyenv
 86 | #   For a library or package, you might want to ignore these files since the code is
 87 | #   intended to run in multiple environments; otherwise, check them in:
 88 | # .python-version
 89 | 
 90 | # pipenv
 91 | #   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
 92 | #   However, in case of collaboration, if having platform-specific dependencies or dependencies
 93 | #   having no cross-platform support, pipenv may install dependencies that don't work, or not
 94 | #   install all needed dependencies.
 95 | #Pipfile.lock
 96 | 
 97 | # poetry
 98 | #   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
 99 | #   This is especially recommended for binary packages to ensure reproducibility, and is more
100 | #   commonly ignored for libraries.
101 | #   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
102 | #poetry.lock
103 | 
104 | # pdm
105 | #   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
106 | #pdm.lock
107 | #   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
108 | #   in version control.
109 | #   https://pdm.fming.dev/latest/usage/project/#working-with-version-control
110 | .pdm.toml
111 | .pdm-python
112 | .pdm-build/
113 | 
114 | # PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
115 | __pypackages__/
116 | 
117 | # Celery stuff
118 | celerybeat-schedule
119 | celerybeat.pid
120 | 
121 | # SageMath parsed files
122 | *.sage.py
123 | 
124 | # Environments
125 | .env
126 | .venv
127 | env/
128 | venv/
129 | ENV/
130 | env.bak/
131 | venv.bak/
132 | 
133 | # Spyder project settings
134 | .spyderproject
135 | .spyproject
136 | 
137 | # Rope project settings
138 | .ropeproject
139 | 
140 | # mkdocs documentation
141 | /site
142 | 
143 | # mypy
144 | .mypy_cache/
145 | .dmypy.json
146 | dmypy.json
147 | 
148 | # Pyre type checker
149 | .pyre/
150 | 
151 | # pytype static type analyzer
152 | .pytype/
153 | 
154 | # Cython debug symbols
155 | cython_debug/
156 | 
157 | # PyCharm
158 | #  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
159 | #  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
160 | #  and can be added to the global gitignore or merged into this file.  For a more nuclear
161 | #  option (not recommended) you can uncomment the following to ignore the entire idea folder.
162 | #.idea/
163 | 


--------------------------------------------------------------------------------
/templates/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <title>Gemini API Chat</title>
 6 |   <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}" />
 7 | </head>
 8 | 
 9 | <body>
10 |   <div id="upload-banner">
11 |     <!-- Success message will be inserted here -->
12 |   </div>
13 |   <div class="main-content">
14 |     <div class="file-upload-section">
15 |       <div class="header">
16 |         <img src="{{ url_for('static', filename='icon.png') }}" alt="Google Gemini Logo" />
17 |         <div class="demo-text">Demo</div>
18 |       </div>
19 |       <div id="filesList">
20 |         <p id="filesPlaceholder" class="hidden">Files</p>
21 |       </div>
22 |       <div class="centered-text">
23 |         <svg width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
24 |           <path fill-rule="evenodd" clip-rule="evenodd"
25 |             d="M30.5641 4.04786C29.9974 4.00156 29.2529 4.00001 28.0998 4.00001H17.5002C17.0998 6 16.6975 7.82282 16.2803 9.70819C16.0173 10.8991 15.7862 11.9461 15.2348 12.828C14.7521 13.6002 14.0999 14.2524 13.3277 14.7351C12.4458 15.2864 11.3989 15.5176 10.2079 15.7805C10.1253 15.7988 10.0419 15.8172 9.95788 15.8359L4.93362 16.9524C4.78815 16.9847 4.64286 17.0003 4.49976 17.0004V27.6C4.49976 28.7531 4.50131 29.4977 4.54761 30.0643C4.59201 30.6077 4.66736 30.8091 4.71775 30.908C4.90949 31.2843 5.21545 31.5903 5.59178 31.782C5.69067 31.8324 5.89211 31.9078 6.43543 31.9521C7.00211 31.9984 7.74665 32 8.89976 32H14.4998C15.6043 32 16.4998 32.8954 16.4998 34C16.4998 35.1046 15.6043 36 14.4998 36H8.82263C7.76835 36 6.85884 36.0001 6.1097 35.9389C5.31901 35.8743 4.53258 35.7316 3.77582 35.346C2.64684 34.7708 1.72896 33.8529 1.15372 32.7239C0.768132 31.9672 0.6255 31.1807 0.560898 30.3901C0.499691 29.6409 0.499722 28.7314 0.499758 27.6771L0.499759 16C0.499759 11.8495 2.55485 7.86649 5.46055 4.96079C8.36624 2.0551 12.3493 7.44227e-06 16.4998 7.44227e-06L28.1768 5.53492e-06C29.2311 -3.02279e-05 30.1407 -6.12214e-05 30.8898 0.0611463C31.6805 0.125748 32.4669 0.26838 33.2237 0.653969C34.3527 1.22921 35.2706 2.14709 35.8458 3.27606C36.2314 4.03282 36.374 4.81926 36.4386 5.60995C36.4998 6.35908 36.4998 7.2686 36.4998 8.32287V14C36.4998 15.1046 35.6043 16 34.4998 16C33.3952 16 32.4998 15.1046 32.4998 14V8.40001C32.4998 7.2469 32.4982 6.50235 32.4519 5.93568C32.4075 5.39235 32.3322 5.19091 32.2818 5.09203C32.09 4.7157 31.7841 4.40974 31.4077 4.21799C31.3089 4.16761 31.1074 4.09225 30.5641 4.04786ZM5.06003 12.8267L9.09016 11.9311C10.677 11.5785 10.9859 11.4818 11.2074 11.3433C11.4648 11.1824 11.6822 10.965 11.8431 10.7076C11.9815 10.4862 12.0783 10.1772 12.4309 8.5904L13.3265 4.56028C11.52 5.18578 9.77023 6.30796 8.28897 7.78922C6.80771 9.27048 5.68553 11.0203 5.06003 12.8267ZM28.4998 24C28.4998 22.8954 29.3952 22 30.4998 22C31.6043 22 32.4998 22.8954 32.4998 24V28H36.4998C37.6043 28 38.4998 28.8954 38.4998 30C38.4998 31.1046 37.6043 32 36.4998 32H32.4998V36C32.4998 37.1046 31.6043 38 30.4998 38C29.3952 38 28.4998 37.1046 28.4998 36V32H24.4998C23.3952 32 22.4998 31.1046 22.4998 30C22.4998 28.8954 23.3952 28 24.4998 28H28.4998V24Z"
26 |             fill="#6E6E80" />
27 |         </svg>
28 |         <p>Attach files to make them available to Gemini</p>
29 |       </div>
30 |       <input type="file" id="file-upload" name="file-upload" class="file-upload-input" multiple />
31 |       <label for="file-upload" class="file-upload-btn">Attach files</label>
32 |     </div>
33 |     <div class="chat-container">
34 |       <div class="messages">
35 |         {% for message in chat_history %}
36 |         <div class="message-role {{ 'user' if message.role == 'user' else '' }}">
37 |           {{ message.role.capitalize() }}
38 |         </div>
39 |         <div class="{{ 'user-message' if message.role == 'user' else 'assistant-message' }}">
40 |           {{ message.content }}
41 |         </div>
42 |         {% endfor %}
43 |       </div>
44 |       <div class="message-input-container">
45 |         <form action="/chat" method="post">
46 |           <textarea name="message" placeholder="Chat with Gemini" required></textarea>
47 |           <div class="button-group">
48 |             <button type="submit" id="send-btn">&#x2191;</button>
49 |           </div>
50 |         </form>
51 |       </div>
52 |     </div>
53 |   </div>
54 |   <script src="{{ url_for('static', filename='chat.js') }}"></script>
55 |   <script src="{{ url_for('static', filename='event-listener.js') }}"></script>
56 | </body>
57 | 
58 | </html>


--------------------------------------------------------------------------------
/static/main.css:
--------------------------------------------------------------------------------
  1 | body, input {
  2 |   line-height: 24px;
  3 |   color: #353740;
  4 |   font-family: "ColfaxAI", Helvetica, sans-serif;
  5 |   margin: 0;
  6 |   padding: 0;
  7 | }
  8 | 
  9 | body {
 10 |   display: flex;
 11 |   flex-direction: column;
 12 |   align-items: stretch;
 13 |   justify-content: center;
 14 |   width: 100%;
 15 |   overflow: hidden;
 16 | }
 17 | 
 18 | .icon {
 19 |   width: 34px;
 20 | }
 21 | 
 22 | h3 {
 23 |   font-size: 32px;
 24 |   line-height: 40px;
 25 |   font-weight: bold;
 26 |   color: #202123;
 27 |   margin: 16px 0 40px;
 28 | }
 29 | 
 30 | .chat-container {
 31 |   max-width: 600px;
 32 |   width: 70%;
 33 |   padding: 40px 20px 20px;
 34 |   margin: 0 auto;
 35 |   display: flex;
 36 |   flex-direction: column;
 37 |   overflow-y: auto;
 38 |   box-sizing: border-box;
 39 |   justify-content: space-between;
 40 | }
 41 | 
 42 | .user-message, .assistant-message {
 43 |   padding: 12px 16px;
 44 |   border-radius: 4px;
 45 |   margin-bottom: 8px;
 46 |   max-width: 80%;
 47 |   word-wrap: break-word;
 48 |   font-size: 16px;
 49 | }
 50 | 
 51 | .user-message {
 52 |   align-self: flex-end;
 53 |   background-color: #f7f7f8;
 54 | }
 55 | 
 56 | .assistant-message {
 57 |   align-self: flex-start;
 58 |   background-color: #cbdbf8;
 59 | }
 60 | 
 61 | .message-input-container {
 62 |   width: 100%;
 63 |   background: #fff;
 64 |   box-sizing: border-box;
 65 |   display: flex;
 66 |   justify-content: center;
 67 |   align-items: start;
 68 |   z-index: 100;
 69 | }
 70 | 
 71 | .message-input-container form, form {
 72 |   display: flex;
 73 |   align-items: center;
 74 |   width: 100%;
 75 |   max-width: 600px;
 76 |   margin: 0 auto;
 77 |   justify-content: space-between;
 78 | }
 79 | 
 80 | textarea, input[type="text"] {
 81 |   border: 1px solid #c5c5d2;
 82 |   border-radius: 8px;
 83 |   padding: 8px 12px;
 84 |   width: calc(100% - 20px);
 85 |   margin: 0 10px 24px 0;
 86 |   box-sizing: border-box;
 87 | }
 88 | 
 89 | textarea {
 90 |   resize: vertical;
 91 |   max-height: 32px;
 92 | }
 93 | 
 94 | input[type="submit"], input[type="button"], #send-btn {
 95 |   padding: 12px 16px;
 96 |   color: #fff;
 97 |   background-color: #1a73e8;
 98 |   border: none;
 99 |   border-radius: 4px;
100 |   text-align: center;
101 |   cursor: pointer;
102 |   margin: 0 2px;
103 | }
104 | 
105 | input[type="submit"] {
106 |   flex-grow: 4;
107 | }
108 | 
109 | input[type="button"] {
110 |   flex-grow: 1;
111 |   background-color: #f44336;
112 | }
113 | 
114 | ::placeholder {
115 |   color: #8e8ea0;
116 |   opacity: 1;
117 | }
118 | 
119 | .result {
120 |   font-weight: bold;
121 |   margin-top: 40px;
122 | }
123 | 
124 | .typing-indicator-container {
125 |   display: flex;
126 |   justify-content: flex-start;
127 | }
128 | 
129 | .typing-indicator {
130 |   margin-left: 4px;
131 |   font-size: 16px;
132 | }
133 | 
134 | .typing-indicator::after {
135 |   content: "•";
136 |   animation: typing 1.5s infinite step-start;
137 | }
138 | 
139 | @keyframes typing {
140 |   0%, 100% {
141 |     content: "•";
142 |   }
143 |   33% {
144 |     content: "••";
145 |   }
146 |   66% {
147 |     content: "•••";
148 |   }
149 | }
150 | 
151 | .button-group {
152 |   display: flex;
153 |   align-items: center;
154 |   justify-content: space-between;
155 | }
156 | 
157 | .file-upload-input {
158 |   display: none;
159 | }
160 | 
161 | #upload-banner {
162 |   display: none;
163 |   position: fixed;
164 |   top: 0;
165 |   width: 100%;
166 |   background-color: #1a73e8;
167 |   color: white;
168 |   text-align: center;
169 |   padding: 10px;
170 |   z-index: 1000;
171 | }
172 | 
173 | #ids-container {
174 |   font-size: 9px;
175 |   margin-bottom: 20px;
176 |   text-align: center;
177 | }
178 | 
179 | .modal {
180 |   display: none;
181 |   position: fixed;
182 |   z-index: 1;
183 |   left: 0;
184 |   top: 0;
185 |   width: 100%;
186 |   height: 100%;
187 |   overflow: auto;
188 |   background-color: rgb(0, 0, 0);
189 |   background-color: rgba(0, 0, 0, 0.4);
190 | }
191 | 
192 | .modal-content {
193 |   background-color: #fefefe;
194 |   margin: 15% auto;
195 |   padding: 20px;
196 |   border: 1px solid #888;
197 |   width: 80%;
198 | }
199 | 
200 | .close {
201 |   color: #aaa;
202 |   float: right;
203 |   font-size: 28px;
204 |   font-weight: bold;
205 | }
206 | 
207 | .close:hover, .close:focus {
208 |   color: black;
209 |   text-decoration: none;
210 |   cursor: pointer;
211 | }
212 | 
213 | .file-icon {
214 |   cursor: pointer;
215 |   color: #000;
216 |   display: inline-block;
217 |   font-size: 24px;
218 |   padding-left: 5px;
219 | }
220 | 
221 | .header {
222 |   background-color: white;
223 |   width: 100%;
224 |   padding: 10px 0;
225 |   display: flex;
226 |   align-items: center;
227 |   justify-content: start;
228 | }
229 | 
230 | .header img {
231 |   height: 20px;
232 |   margin-right: 10px;
233 | }
234 | 
235 | .header .demo-text {
236 |   font-size: 15px;
237 |   font-weight: bold;
238 | }
239 | 
240 | .message-role {
241 |   align-self: flex-start;
242 |   font-size: 12pt;
243 |   color: #000000;
244 |   margin-bottom: 4px;
245 | }
246 | 
247 | .message-role.user {
248 |   align-self: flex-end;
249 | }
250 | 
251 | #send-btn {
252 |   width: 42px;
253 |   height: 32px;
254 |   border-radius: 4px;
255 |   border: 1px solid #c5c5d2;
256 |   background-color: #1a73e8;
257 |   color: #fff;
258 |   cursor: pointer;
259 |   display: flex;
260 |   justify-content: center;
261 |   align-items: center;
262 | }
263 | 
264 | .file-upload-section {
265 |   display: flex;
266 |   flex-direction: column;
267 |   justify-content: space-around;
268 |   align-items: center;
269 |   padding: 20px;
270 |   box-sizing: border-box;
271 |   border-right: 1px solid #c5c5d2;
272 | }
273 | 
274 | .centered-text {
275 |   margin-top: 85%;
276 |   padding: 20px;
277 |   text-align: center;
278 |   width: 100%;
279 | }
280 | 
281 | .file-upload-btn, .file-upload-input + label {
282 |   margin-top: auto;
283 |   width: calc(100% - 40px);
284 |   padding: 4px 8px;
285 |   cursor: pointer;
286 |   background-color: #1a73e8;
287 |   color: white;
288 |   border: none;
289 |   max-height: 32px;
290 |   border-radius: 8px;
291 |   box-sizing: border-box;
292 |   text-align: center;
293 | }
294 | 
295 | body::after {
296 |   content: none;
297 | }
298 | 
299 | .main-content {
300 |   display: flex;
301 |   flex-direction: row;
302 |   height: 100vh;
303 |   overflow: auto;
304 |   align-items: stretch;
305 | }
306 | 
307 | .messages {
308 |   flex-grow: 1;
309 |   overflow-y: auto;
310 |   display: flex;
311 |   flex-direction: column;
312 | }
313 | 
314 | .hidden {
315 |   display: none;
316 | }
317 | 
318 | #filesList {
319 |   width: 100%;
320 | }
321 | 
322 | .file-entry {
323 |   display: flex;
324 |   justify-content: space-between;
325 |   align-items: center;
326 |   gap: 10px;
327 |   padding-bottom: 15px;
328 | }
329 | 
330 | .file-entry div {
331 |   display: flex;
332 |   align-items: center;
333 | }
334 | 
335 | .file-entry span {
336 |   flex-grow: 1;
337 |   margin: 0 10px;
338 | }
339 | 
340 | #filesDivider {
341 |   border-top: 1px solid #ececf1;
342 |   width: 100%;
343 | }
344 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright [yyyy] [name of copyright owner]
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------