Web AI Interface (WAII) initial commit, v1

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+web_ai_interface_app/.env

README.md

@@ -0,0 +1,98 @@
+
+# Web AI interface (WAII) 
+
+A simple user interface for interacting with AI technologies using Python and Flask
+
+## Project setup
+
+These instructions walk you through getting the WAII project set up for
+development and testing. The general steps are installing some prerequisite
+software, cloning the project from the code repository, setting a few environment 
+variables, and running the configuration installation. The code project uses
+[Python Poetry](https://python-poetry.org/) to manage packages and
+the Python runtime environment.
+
+Note: You need a Google Gemini API Key to be able to run the project, which you
+can obtain from the 
+[Google Gemini API](https://ai.google.dev/gemini-api/docs/api-key) page.
+
+### Install the prerequisites
+
+The WAII project uses Python 3 and Python Poetry to manage packages and
+run the application. The following installation instructions are for a Linux
+host machine.
+
+To install the required software:
+
+1.  Install Python 3 and the `venv` virtual environment package for Python.\
+<pre>
+sudo apt update
+sudo apt install git pip python3-venv
+</pre>
+1.  Install Python Poetry to manage dependencies and packaging for the
+    project.\
+<pre>
+curl -sSL https://install.python-poetry.org | python3 -
+</pre>
+
+You can use Python Poetry to add more Python libraries if you extend the
+project. For more information about Python Poetry, see the
+[Python Poetry](https://python-poetry.org/docs/) documentation.
+
+### Clone and configure the project
+
+Download the project code and use the Poetry installation command to download
+the required dependencies and configure the project. You need
+[git](https://git-scm.com/) source control software to retrieve the
+project source code.
+
+To download and configure the project code:
+
+1.  Clone the git repository using the following command.\
+<pre>
+git clone https://github.com/joefernandez/waii.git
+</pre>
+1.  Move to the `waii` project root directory.\
+<pre>
+cd waii/
+</pre>
+1.  Run the Poetry install command to download dependencies and configure
+    the project:\
+<pre>
+poetry install
+</pre>
+
+### Set environment variables
+
+Set a few environment variables that are required to allow the WAII code
+project to run, including a
+[Google Gemini API Key](https://ai.google.dev/gemini-api/docs/api-key). 
+You add these variable settings to a `.env` file, which is read by the 
+web application.
+
+Caution: Treat your API Key like a password and protect it appropriately. Don't
+embed your key in publicly published code.
+
+To set the environment variables:
+
+1.  Get a [Google Gemini API Key](https://ai.google.dev/gemini-api/docs/api-key) 
+    and copy the key string.
+1.  Set the API Key as an environment variable for the project, by creating
+    `.env` text file at this location in your clone of the project:\ 
+    `<waii-project>/web_ai_interface_app/.env`
+1.  After creating the `.env` text file, add the following settings and save it:
+<pre>
+API_KEY=&lt;YOUR_API_KEY_HERE&gt;
+</pre>
+
+### Run and test the application
+
+1.  In a terminal window, navigate to the `waii/web_ai_interface_app/`
+    directory.\
+<pre>
+cd web_ai_interface_app/
+</pre>
+1.  Run the application:\
+<pre>
+poetry run flask run
+</pre>

pyproject.toml

@@ -0,0 +1,17 @@
+[tool.poetry]
+name = "web-ai-interface-app"
+version = "0.1.0"
+description = ""
+authors = ["Joe Fernandez <[email protected]>"]
+readme = "README.md"
+
+[tool.poetry.dependencies]
+python = "^3.9"
+flask = "^3.0.3"
+google-generativeai = "^0.7.2"
+python-dotenv = "^1.0.1"
+
+
+[build-system]
+requires = ["poetry-core"]
+build-backend = "poetry.core.masonry.api"

web_ai_interface_app/app.py

@@ -0,0 +1,39 @@
+#
+# Copyright 2024 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+from flask import Flask, render_template, request
+from web_ai_interface_app.models.gemini import create_message_processor
+
+app = Flask(__name__)
+
+@app.route('/', methods=['GET', 'POST'])
+def index():
+    """Set up web interface and handle POST input."""
+    process_message = create_message_processor()
+
+    if request.method == 'POST':
+        prompt = get_prompt()
+        customer_request = request.form['request']
+        prompt += customer_request
+        result = process_message(prompt)
+        # re-render page with data:
+        return render_template('index.html', request=customer_request, result=result)
+    return render_template('index.html')
+
+if __name__ == '__main__':
+    app.run(debug=True)
+
+def get_prompt():
+    return "Extract the relevant details of this request and return them in JSON format:\n"

web_ai_interface_app/models/gemini.py

@@ -0,0 +1,38 @@
+#
+# Copyright 2024 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+import google.generativeai as genai
+from dotenv import load_dotenv
+import os
+
+def initialize_model():
+    """Loads environment variables and configures the GenAI client."""
+    load_dotenv()
+    api_key = os.getenv('API_KEY')
+    if not api_key:
+        raise ValueError("API_KEY environment variable not found. Did you set it in your .env file?")
+    genai.configure(api_key=api_key)
+    return genai.GenerativeModel('gemini-1.5-flash')  # Return the initialized model
+
+def create_message_processor():
+    """Creates a message processor function with a persistent model."""
+    model = initialize_model()
+
+    def process_message(message):
+        """Processes a message using the GenAI model."""
+        response = model.generate_content(message)
+        print(response.text) # REMOVE: FOR TESTING ONLY
+        return response.text
+    return process_message

web_ai_interface_app/templates/index.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Web AI Interface app template</title>
+    <style>
+        body {
+            margin: 0;
+            font-family: sans-serif;
+        }
+
+        .container {
+            display: flex;
+            height: 100vh;
+        }
+
+        .left-column {
+            width: 25%;
+            background-color: #f0f0f0;
+            padding: 20px;
+            margin-right: 20px;
+        }
+
+        .right-column {
+            width: 75%;
+            background-color: #fff;
+            padding: 20px;
+        }
+
+        .logo {
+            width: 100px;
+            height: 50px;
+            margin-bottom: 20px;
+        }
+
+        .form-container {
+            margin-bottom: 20px;
+        }
+
+        .form-input {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+
+        .form-button {
+            padding: 10px 20px;
+            background-color: #828282;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="left-column">
+            <div class="logo">
+                <h2>Cake&nbsp;Boss</h2>
+                <p>with&nbsp;Google&nbsp;AI</p>
+            </div>
+        </div>
+        <div class="right-column">
+            <div class="form-container">
+                <h3>Enter a cake request:</h3>
+                <form method="POST" action="/">
+                    <textarea class="form-input" id="request" name="request" required>{{ request }}
+                    </textarea><br><br>
+                    <button type="submit" class="form-button">Get data</button>
+                </form>
+            </div>
+            {% if result %}
+            <br><br>
+            <h3>Output</h3>
+            <code>{{ result }}</code>
+            {% endif %}
+        </div>
+    </div>
+</body>
+</html>