Now with a custom greeting

requirements.in

@@ -1,2 +1,5 @@
 langchain
+langchain-community
+openai
 fastapi
+pydantic-settings

src/hellocomputer/config.py

@@ -0,0 +1,12 @@
+from pydantic_settings import BaseSettings, SettingsConfigDict
+
+
+class Settings(BaseSettings):
+    anyscale_api_key: str = "Awesome API"
+    gcs_access: str = "access"
+    gcs_secret: str = "secret"
+
+    model_config = SettingsConfigDict(env_file=".env")
+
+
+settings = Settings()

src/hellocomputer/main.py

@@ -1,8 +1,12 @@
 from fastapi import FastAPI, status
 from fastapi.staticfiles import StaticFiles
+from fastapi.responses import PlainTextResponse
 import hellocomputer
 from pathlib import Path
 from pydantic import BaseModel
+from langchain_community.chat_models import ChatAnyscale
+from langchain_core.messages import HumanMessage, SystemMessage
+from .config import settings
 
 static_path = Path(hellocomputer.__file__).parent / "static"
 
@@ -36,6 +40,30 @@ def get_health() -> HealthCheck:
     return HealthCheck(status="OK")
 
 
+@app.get("/greetings", response_class=PlainTextResponse)
+async def get_greeting() -> str:
+    model = "meta-llama/Meta-Llama-3-8B-Instruct"
+    chat = ChatAnyscale(
+        model_name=model,
+        temperature=0.5,
+        anyscale_api_key=settings.anyscale_api_key,
+    )
+
+    messages = [
+        SystemMessage(content="You are a helpful AI that shares everything you know."),
+        HumanMessage(
+            content="Make a short presentation of yourself "
+            "as an assistant in Spanish in about 20 words. "
+            "You're capable of analyzing a file that a user "
+            "has previously uploaded."
+        ),
+    ]
+
+    model_response = await chat.ainvoke(messages)
+    print(model_response.response_metadata)
+    return model_response.content
+
+
 app.mount(
     "/",
     StaticFiles(directory=static_path, html=True, packages=["bootstrap4"]),

src/hellocomputer/static/index.html

@@ -7,9 +7,6 @@
     <title>Chat Application</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
-    <script src="https://unpkg.com/htmx.org@1.9.12"
-        integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2"
-        crossorigin="anonymous"></script>
     <link rel="stylesheet" href="style.css">
 </head>
 
@@ -35,14 +32,43 @@
             <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
                 <button class="btn btn-primary" id="menu-toggle">◀</button>
             </nav>
+            <div class="container mt-4">
+                <!-- Button trigger modal -->
+                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
+                    Upload a file...
+                </button>
 
+                <!-- Modal -->
+                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
+                    aria-hidden="true">
+                    <div class="modal-dialog">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <h5 class="modal-title" id="exampleModalLabel">Upload a file</h5>
+                                <button type="button" class="btn-close" data-bs-dismiss="modal"
+                                    aria-label="Close"></button>
+                            </div>
+                            <div class="modal-body">
+                                <input type="file" class="custom-file-input" id="inputGroupFile01">
+                            </div>
+                            <div class="modal-footer">
+                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <div class="container chat-wrapper mt-4">
                 <div class="chat-container">
                     <div class="chat-messages">
                         <!-- Messages will be appended here -->
-                        <div class="message bg-light p-2 mb-2 rounded">Message 1</div>
-                        <div class="message bg-light p-2 mb-2 rounded">Message 2</div>
-                        <div class="message bg-light p-2 mb-2 rounded">Message 3</div>
+                        <div class="message bg-light p-2 mb-2 rounded">
+                            <img src="/img/assistant.webp" width="50px">
+                            <div id="content">
+                                <div id="spinner" class="spinner"></div>
+                                <div id="result" class="hidden"></div>
+                            </div>
+                        </div>
                     </div>
                     <div class="chat-input">
                         <div class="input-group">
@@ -63,6 +89,9 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
         crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/htmx.org@1.9.12"
+        integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2"
+        crossorigin="anonymous"></script>
     <script src="script.js"></script>
 </body>
 

src/hellocomputer/static/script.js

@@ -47,4 +47,33 @@ textarea.addEventListener('keypress', function (e) {
         e.preventDefault();
         addUserMessage();
     }
-});
+});
+
+document.addEventListener("DOMContentLoaded", function () {
+    // Elements
+    const spinner = document.getElementById('spinner');
+    const resultDiv = document.getElementById('result');
+
+    // Function to fetch greeting
+    async function fetchGreeting() {
+        try {
+            const response = await fetch('/greetings');
+            if (!response.ok) {
+                throw new Error('Network response was not ok ' + response.statusText);
+            }
+            const data = await response.text();
+
+            // Hide spinner and display result
+            spinner.classList.add('hidden');
+            resultDiv.classList.remove('hidden');
+            resultDiv.textContent = data;
+        } catch (error) {
+            spinner.classList.add('hidden');
+            resultDiv.classList.remove('hidden');
+            resultDiv.textContent = 'Error: ' + error.message;
+        }
+    }
+
+    // Call the function to fetch greeting
+    fetchGreeting();
+});

src/hellocomputer/static/style.css

@@ -64,4 +64,29 @@ html {
     border-top: 1px solid #ddd;
     padding: 10px;
     box-sizing: border-box;
+}
+
+
+.spinner {
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #3498db;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    animation: spin 2s linear infinite;
+    margin: auto;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.hidden {
+    display: none;
 }