Upload 14 files

.gitattributes

@@ -33,3 +33,6 @@ 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
+static/Icon-192.png filter=lfs diff=lfs merge=lfs -text
+static/images/black[[:space:]]bg.jpeg filter=lfs diff=lfs merge=lfs -text
+static/images/light[[:space:]]bg.jpeg filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,11 @@
+FROM python:3.9
+
+WORKDIR /app
+
+COPY requirements.txt .
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+CMD ["gunicorn", "-w", "4", "-b", "0.0.0.0:7860", "app:app"]

app.py

@@ -0,0 +1,200 @@
+import google.generativeai as generativeai
+from flask import Flask, request, jsonify, render_template, send_file
+from google.genai import types
+from PIL import Image
+from io import BytesIO
+from google import genai
+
+
+#Connect to index.html
+app = Flask(__name__)
+
+
+@app.route("/write", methods=["GET", "POST"])
+def write():
+    if request.method == "GET":
+        return render_template("write.html")
+
+    if request.method == "POST":
+        # Getting data from form
+        question = request.form.get("question", "").strip()
+        types = request.form.get("type", "").strip()
+        word_limit = request.form.get("word_limit", "").strip()
+
+        print(f"\nRAW FORM DATA -> question: '{question}', type: '{types}', word_limit: '{word_limit}'\n-------------------------------\n")
+
+        if not question:
+            return jsonify({"error": "Please provide a question."}), 400
+
+        if word_limit:
+            try:
+                word_limit = float(word_limit)
+            except ValueError:
+                return jsonify({"error": "Word limit must be a number."}), 400
+        else:
+            word_limit = None
+
+        generativeai.configure(api_key="AIzaSyAa4WXqagEm5XgWe2jkpkb7ggYL2HiB8LU")
+
+        try:
+            model = generativeai.GenerativeModel("gemini-2.0-flash")
+            prompt = (
+                f"You are TaskBot AI created by Advay Singh and powered by Gemini AI. "
+                f"Write a {types if types else 'paragraph'} on the topic '{question}'"
+            )
+            if word_limit:
+                prompt += f" nearly about {word_limit} words."
+
+            response = model.generate_content(prompt)
+            print(f"ANSWER BY TASKBOT AI: \n {response.text}")
+            return jsonify({"answer": response.text})
+                
+        except Exception as e:
+            print(f"Error: {e}")
+            return jsonify({"error": "An error occurred while processing your request."}), 500
+
+@app.route("/summarize", methods=["GET", "POST"])
+def summarize():
+    if request.method == "GET":
+        return render_template("summarize.html")
+    if request.method == "POST":
+        question = request.form.get("question", "").strip()
+    types = request.form.get("type")
+    minimum_lines_points = request.form.get("num_of_lines_points")
+    if not question:
+        return jsonify({"error": "Please provide a question."}), 400
+
+    generativeai.configure(api_key="AIzaSyAa4WXqagEm5XgWe2jkpkb7ggYL2HiB8LU")
+
+    try:
+
+        model = generativeai.GenerativeModel('gemini-2.0-flash')
+        prompt = (
+            f"You are TaskBot AI created by Advay Singh and powered by Gemini AI. "
+            f"Write a {types if types else 'paragraph'} on the topic '{question}'")
+        if minimum_lines_points:
+            prompt += f" nearly about {minimum_lines_points} {types}."
+        response = model.generate_content(prompt)
+        answer = response.text
+
+        print(f"Raw Text: \n{question};  Type: {types}; Minimum {types}: {minimum_lines_points}\n------------------------- \n {answer} \n -------------------------")
+
+        return jsonify({"answer": answer})
+    except Exception as e:
+        print(f"Error: {e}")
+        return jsonify({"error": "An error occurred while processing your request."}), 500
+    
+
+@app.route("/think", methods=["GET", "POST"])
+def think():
+    if request.method == "GET":
+        return render_template("think.html")
+    if request.method == "POST":
+
+        question = request.form.get("question", "").strip()
+        if not question:
+            return jsonify({"error": "Please provide a question."}), 400
+
+        generativeai.configure(api_key="AIzaSyAa4WXqagEm5XgWe2jkpkb7ggYL2HiB8LU")
+
+        try:
+            model = generativeai.GenerativeModel('gemini-2.0-flash-thinking-exp-01-21')
+            response = model.generate_content(f"You are TaskBot AI created by Advay Singh and powered by Gemini AI. Remember that and don't say     anything (not even ok) about that just answer me this question- {question}.")
+            answer = response.text
+
+
+            print(f"Question: {question}\n------------------------- \n {answer} \n -------------------------\n")
+
+            return jsonify({"answer": answer})
+        except Exception as e:
+            print(f"Error: {e}")
+            return jsonify({"error": "An error occurred while processing your request."}), 500
+
+
+@app.route("/translate", methods=["GET", "POST"])
+def translate():
+    if request.method == "GET":
+        return render_template("translate.html")
+    if request.method == "POST":
+        question = request.form.get("question", "").strip()
+        translate_from = request.form.get("translate_from", "").strip()
+        translate_to = request.form.get("translate_to", "").strip()
+        if not question:
+            return jsonify({"error": "Please provide a question."}), 400
+
+        generativeai.configure(api_key="AIzaSyAa4WXqagEm5XgWe2jkpkb7ggYL2HiB8LU")
+
+        try:
+
+            model = generativeai.GenerativeModel('gemini-2.0-flash')
+            response = model.generate_content(f"You are TaskBot AI created by Advay Singh and powered by Gemini AI remember this and don't say  anything about this unitll asked (not even ok). Just translate {question} from {translate_from} to {translate_to} and nothing else.  ")
+            answer = response.text
+
+            print(f"Translate: {question} from {translate_from} to {translate_to}\n------------------------- \n {answer} \n--------------------------")
+
+            return jsonify({"answer": answer})
+        except Exception as e:
+            print(f"Error: {e}")
+            return jsonify({"error": "An error occurred while processing your request."}), 500
+
+@app.route("/imagine", methods=["GET", "POST"])
+def imagine():
+    if request.method == "GET":
+        return render_template("imagine.html")
+    if request.method == "POST":
+        contents = request.form.get("contents", "").strip()
+    if not contents:
+        return jsonify({"error": "Please provide a prompt."}), 400
+    
+    client = genai.Client(api_key="AIzaSyC29gcbTAWKK99f6V9T07bNLz0IefRBKWc")
+
+    response = client.models.generate_content(
+        model="gemini-2.0-flash-preview-image-generation",
+        contents=contents,
+        config=types.GenerateContentConfig(
+          response_modalities=['TEXT', 'IMAGE']
+        )
+    )
+    print(f"\nPROMPT: {contents}\n")
+    for part in response.candidates[0].content.parts:
+        if part.inline_data is not None:
+            image = Image.open(BytesIO(part.inline_data.data))
+            img_io = BytesIO()
+            image.save(img_io, format="PNG")
+            img_io.seek(0)
+            return send_file(img_io, mimetype="image/png")
+
+    return jsonify({"error": "No image returned by model"}), 500
+
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+@app.route("/ask", methods=["POST"])
+def ask():
+    #getting the question from the form55
+    question = request.form.get("question", "").strip()
+    if not question:
+        return jsonify({"error": "Please provide a question."}), 400
+
+    generativeai.configure(api_key="AIzaSyAa4WXqagEm5XgWe2jkpkb7ggYL2HiB8LU")
+
+    try:
+        # use Google's Gemini-2.0-Flash nodle for generating content
+        model = generativeai.GenerativeModel('gemini-2.0-flash')
+        response = model.generate_content(f"You are TaskBot AI created by Advay Singh and powered by Gemini AI. Remember that and don't say anything (not even ok) about that just answer me this question- {question}.")
+        answer = response.text
+
+        # Log the question and answer for debugging
+        print(f"Question: {question}\n------------------------- \n {answer} \n -------------------------")
+        # Return the answer as JSON
+        return jsonify({"answer": answer})
+    except Exception as e:
+        print(f"Error: {e}")
+        return jsonify({"error": "An error occurred while processing your request."}), 500
+
+if __name__ == '__main__':
+
+        app.run(host="0.0.0.0", port=7860)
+        

static/manifest.json

@@ -0,0 +1,22 @@
+{
+    "name": "TaskBot AI",
+    "short_name": "TaskBot",
+    "start_url": "/",
+    "display": "standalone",
+    "scope": "/",
+    "background_color": "#2f2f2f",
+    "theme_color": "#2f2f2f",
+    "orientation": "portrait",
+    "icons": [
+        {
+            "src": "icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}

static/service-worker.js

@@ -0,0 +1,15 @@
+self.addEventListener("install", (e) => {
+    e.waitUntil(
+        caches.open("taskbot-cache").then((cache) => {
+            return cache.addAll(["/", "/static/style.css", "/static/script.js"]);
+        })
+    );
+});
+
+self.addEventListener("fetch", (e) => {
+    e.respondWith(
+        caches.match(e.request).then((response) => {
+            return response || fetch(e.request);
+        })
+    );
+});

templates/imagine.html

@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Imagine | TaskBot v1+ AI</title>
+</head>
+
+<style>
+    body {
+        background-color: #2f2f2f;
+        font-family: Arial, sans-serif;
+        color: white;
+        margin: 0;
+        padding: 20px;
+    }
+
+    input {
+        width: 100%;
+        height: 26px;
+        border-radius: 50px;
+        text-align: center;
+        justify-content: center;
+
+    }
+
+    #image {
+        text-align: center;
+        border: 1px solid white;
+        padding: 10px;
+        margin: 20px auto;
+        height: 400px;
+        width: 400px;
+    }
+
+    #inputWrapper {
+        text-align: center;
+        margin: 20px auto;
+        bottom: 20px;
+
+    }
+
+    button {
+        background-color: black;
+        color: greenyellow;
+        height: 50px
+    }
+
+    @media (max-width: 768px) {
+        #image {
+            width: 300px;
+            height: 300px;
+        }
+
+        input {
+            width: 80%;
+        }
+    }
+
+    small {
+        color: gray;
+        text-align: center;
+        display: block;
+    }
+
+    h1 {
+        text-align: center;
+    }
+
+    @keyframes color-change {
+        0% {
+            background-color: red;
+        }
+
+        20% {
+            background-color: blue;
+        }
+
+        40% {
+            background-color: rgb(0, 255, 0);
+        }
+
+        60% {
+            background-color: aqua;
+        }
+
+        80% {
+            background-color: yellow;
+        }
+
+        100% {
+            background-color: red;
+        }
+    }
+
+    .color_change {
+        animation: color-change 4s infinite;
+    }
+</style>
+
+<div>
+    <h1>Image Generator</h1><br>
+    <small>Powered by gemini-2.0-flash-preview-image-generation</small><br><br>
+    <br>
+    <div id="image">
+        <img src="" id="generated_image" style="max-width: 400px;" alt="Generated Image"><br><br><br>
+    </div>
+    <div id="inputWrapper">
+        <input type="text" id="contents" placeholder="Enter your prompt..."><br><br><br>
+        <button onclick="generate()" id="generate_button">Generate Image</button>
+    </div>
+    </body>
+    <script>
+        async function generate() {
+            document.getElementById("generate_button").disabled = true
+            document.getElementById("image").classList.add("color_change");
+            document.getElementById("image").src = "";
+            const contents = document.getElementById("contents").value;
+            const response = await fetch("/imagine", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/x-www-form-urlencoded"
+                },
+                body: new URLSearchParams({ contents })
+            });
+
+            if (response.ok) {
+                const blob = await response.blob();
+                const imgUrl = URL.createObjectURL(blob);
+                document.getElementById("generated_image").src = imgUrl;
+                document.getElementById("image").classList.remove("color_change")
+                document.getElementById("image").style.border = "none";
+                document.getElementById("generate_button").disabled = false
+            } else {
+                console.error("Error generating image:", response.statusText);
+            }
+        }
+        document.getElementById("contents").addEventListener("keypress", (event) => {
+            if (event.key === "Enter") {
+                generate()
+            }
+        })
+
+    </script>
+
+</html>

templates/index.html

@@ -0,0 +1,344 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TaskBot v1+</title>
+    <script src="https://kit.fontawesome.com/cda0e70b18.js" crossorigin="anonymous"></script>
+    <link rel="Icon" href="TaskBot logo.png">
+    <link rel="manifest" href="/static/manifest.json">
+</head>
+
+<style>
+    body {
+        background-color: #2f2f2f;
+        font-family: Arial, sans-serif;
+        color: white;
+        margin: 0;
+        padding: 20px;
+        background: url("{{ url_for('static', filename='images/black bg.jpeg') }}");
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-attachment: fixed;
+        background-position: center center;
+    }
+    nav {
+        background-color: #444;
+        padding: 5px;
+        border-radius: 5px;
+        width: 100%;
+        height: auto;
+        top: 0;
+    }
+    .sticky {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        z-index: 1000;
+    }
+    .sticky2 {
+        position: absolute;
+        top: 20px;
+        right: 80px;
+        z-index: 1000;
+    }
+    .sticky3 {
+        position: absolute;
+        top: 20px;
+        right: 140px;
+        z-index: 1000;
+    }
+    /* Dropdown Styles */
+    .dropdown {
+        position: relative;
+        display: inline-block;
+    }
+    .btn {
+        background-color: transparent;
+        color: white;
+        border: none;
+        cursor: pointer;
+    }
+    .btn:hover {
+        background-color: #494949;
+    }
+    .dropdown-content {
+        display: none;
+        position: absolute;
+        right: 0;
+        background-color: transparent;
+        backdrop-filter: blur(5px);
+        border: 1px solid black;
+        min-width: 160px;
+        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
+        z-index: 1;
+        text-align: center;
+    }
+    .dropdown-content h3 {
+        margin: 5px 0;
+        color: white;
+        text-align: center;
+    }
+    .dropdown-content a {
+        color: white;
+        padding: 12px 16px;
+        text-decoration: none;
+        display: block;
+        border-top: 1px solid transparent;
+    }
+    .dropdown-content a:hover {
+        background-color: #bebebe;
+    }
+    .dropdown:hover .dropdown-content {
+        display: block;
+    }
+    main {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: calc(100vh - 100px);
+        /* adjust if header height changes */
+        text-align: center;
+    }
+    /* Input and Button Styles */
+    #question {
+        padding: 10px;
+        font-size: 16px;
+        border-radius: 5px;
+        border: 1px solid #ccc;
+        margin-right: 10px;
+    }
+    .ai,
+    .user {
+        background-color: transparent;
+        backdrop-filter: blur(5px);
+        padding: 10px;
+        padding-right: 10px;
+        border-radius: 5px;
+        border: solid #ccc;
+        margin: 10px;
+        text-align: center;
+        justify-content: right;
+        width: 40%;
+        color: rgb(227, 227, 227)
+    }
+    .text1 {
+        display: flex;
+        justify-content: right;
+        align-items: center;
+        margin: 10px;
+    }
+    .text2 {
+        display: flex;
+        justify-content: left;
+        align-items: center;
+        margin: 10px;
+    }
+    .chat-input-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 20px;
+    }
+    #sendButton {
+        margin-left: 10px;
+        padding: 10px 20px;
+        border: none;
+        border-radius: 5px;
+        background-color: #fff;
+        cursor: pointer;
+        transition: background-color 0.3s;
+    }
+    #sendButton:hover {
+        background-color: #e0e0e0;
+    }
+    .inputWrapper {
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        position: fixed;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        gap: 10px;
+        z-index: 1000;
+    }
+    .inputWrapper input {
+        width: 100%;
+        padding: 10px;
+    }
+    .tools button {
+        font-size: 18px;
+        padding: 10px 20px;
+        border-radius: 50px;
+        cursor: pointer;
+    }
+    #welcomeMessage {
+        text-align: center;
+        margin-top: 20%;
+    }
+    .tools-content {
+        display: none;
+    }
+    .tools:hover {
+        .tools-content {
+            display: block
+        }
+    }
+</style>
+
+<body>
+    
+    <H1 id="welcomeMessage">Hello 👋, what can I help with?</H1>
+    <div id="chatArea">
+        <div class="text1">
+            <div class="user" style="display: none;"></div>
+        </div>
+        <div class="text2">
+            <div class="ai" style="display: none;"></div>
+        </div>
+    </div>
+
+    <main>
+        <div class="inputWrapper">
+            <input type="text" id="userInput" placeholder="Type your message here..."
+                style="width: 200px;color: white; backdrop-filter: blur(100px);background-color: transparent; border-radius: 50px;border: 1px solid #ccc;margin-right: 10px;margin-left: 10px;">
+            <div
+                style="display: flex; flex-direction: row; gap: 10px; margin-top: 10px; width: 100%; justify-content: center;">
+                <div class="tools">
+                    <div class="tools-content">
+                        <a href="/write"><button
+                                style="color: greenyellow;background-color: black;">Write</button></a><br>
+                        <a href="/summarize"><button
+                                style="color: greenyellow;background-color: black;">Summarize</button></a><br>
+                        <a href="/translate"><button
+                                style="color: greenyellow;background-color: black;">Translate</button></a><br>
+                        <a href="/imagine"><button
+                                style="color: greenyellow;background-color: black;">Imagine</button></a><br>
+                        <a href="/think"><button
+                                style="color: greenyellow;background-color: black;">Think</button></a><br>
+                    </div>
+                    <button style="background-color: black;">
+                        <i class="fa-solid fa-sliders fa-2xl" style="color: #63E6BE;"></i>
+                    </button>
+                </div>
+                <button id="sendButton" onclick="answer()"
+                    style="font-weight: bold; background-color: black; color: greenyellow">&#8593</button>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        async function answer() {
+            document.getElementById("sendButton").disabled = true
+            const welcomeMessage = document.getElementById('welcomeMessage');
+            welcomeMessage.style.display = 'none'; // Hide the welcome message 
+            const userInput = document.getElementById('userInput').value;
+            if (userInput.trim() === '') return;
+            // Create wrapper for text1 (User message)
+            const text1 = document.createElement('div');
+            text1.className = 'text1';
+            const userMessage = document.createElement('div');
+            userMessage.className = 'user';
+            userMessage.textContent = userInput;
+            text1.appendChild(userMessage);
+            // Append user message to the chat area
+            document.getElementById('chatArea').appendChild(text1);
+            // Clear input
+            document.getElementById('userInput').value = '';
+            const question = userInput; // Use the already retrieved value
+            // Send a POST request to the /ask route
+            const response = await fetch("/ask", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/x-www-form-urlencoded"
+                },
+                body: new URLSearchParams({ question: question })
+            });
+            const data = await response.json();
+            // Create wrapper for text2 (AI response)
+            const text2 = document.createElement('div');
+            text2.className = 'text2';
+            const aiResponse = document.createElement('div');
+            aiResponse.className = 'ai';
+            if (data.answer) {
+                aiResponse.textContent = data.answer;
+            } else if (data.error) {
+                aiResponse.textContent = "Error: " + data.error;
+            }
+            text2.appendChild(aiResponse);
+            // Append AI response to the chat area
+            document.getElementById('chatArea').appendChild(text2);
+            document.getElementById("sendButton").disabled = false
+        }
+        if ("serviceWorker" in navigator) {
+            navigator.serviceWorker
+                .register("/static/service-worker.js")
+                .then(() => console.log("Service Worker Registered"))
+                .catch((err) => console.error("SW registration failed:", err));
+        }
+        document.getElementById("theme").addEventListener("click", () => {
+            if (document.getElementsByTagName("body")[0].style.backgroundColor === "black") {
+                document.getElementsByTagName("body")[0].style.backgroundColor = "#2f2f2f";
+                document.getElementById("theme").textContent = "Theme: ☀️ (Light)";
+                document.getElementById("welcomeMessage").style.color = "black";
+                document.getElementsByTagName("body")[0].style.backgroundImage = "url({{ url_for('static', filename='images/light bg.jpeg') }})";
+                document.getElementById("drop-down-h3-menu").style.color = "black"
+                document.getElementById("drop-down-h3-settings").style.color = "black"
+                document.getElementById("drop-down-h3-warnings").style.color = "black"
+                document.getElementById("btn").style.color = "black"
+                document.querySelectorAll(".user").forEach(element => {
+                    element.style.color = "black"
+                });
+                document.querySelectorAll(".ai").forEach(element => {
+                    element.style.color = "black"
+                })
+                document.querySelectorAll(".dropdown-content a").forEach(element => {
+                    element.style.color = "black"
+                })
+                document.getElementById("i_class").style.color = "black";
+                document.querySelectorAll(".dropdown-content p").forEach(element => {
+                    element.style.color = "black"
+                })
+                document.getElementById("i_class_2").style.color = "black";
+                document.getElementsByTagName("h2")[0].style.color = "black";
+            } else {
+                document.getElementsByTagName("body")[0].style.backgroundColor = "black";
+                document.getElementById("theme").textContent = "Theme: 🌙 (Dark)";
+                document.getElementById("welcomeMessage").style.color = "white";
+                document.getElementsByTagName("body")[0].style.backgroundImage = "url({{ url_for('static', filename='images/black bg.jpeg') }})";
+                document.getElementById("drop-down-h3-menu").style.color = "white"
+                document.getElementById("drop-down-h3-settings").style.color = "white"
+                document.getElementById("drop-down-h3-warnings").style.color = "white"
+                document.querySelectorAll(".user").forEach(elements => {
+                    elements.style.color = "white"
+                })
+                document.querySelectorAll(".ai").forEach(elements => {
+                    elements.style.color = "white"
+                })
+                document.getElementById("btn").style.color = "white"
+                document.querySelectorAll(".dropdown-content a").forEach(element => {
+                    element.style.color = "white"
+                })
+                document.getElementById("i_class").style.color = "white";
+                document.querySelectorAll(".dropdown-content p").forEach(element => {
+                    element.style.color = "white"
+                })
+                document.getElementById("i_class_2").style.color = "white";
+                document.getElementsByTagName("h2")[0].style.color = "white";
+            }
+        })
+        document.getElementById("userInput").addEventListener("keypress", () => {
+            if (event.key === "Enter") {
+                sendButton.click()
+            }
+        })
+    </script>
+
+</body>
+
+</html>

templates/summarize.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Summarize | TaskBot v1+ AI</title>
+    <link rel="Icon" href="TaskBot logo.png">
+</head>
+<style>
+    body {
+        background-color: #2f2f2f;
+        font-family: Arial, sans-serif;
+        color: white;
+        margin: 0;
+        padding: 20px;
+    }
+
+    h1 {
+        text-align: center;
+    }
+
+    textarea {
+        width: 100%;
+        height: 300px;
+    }
+
+    button {
+        width: 100px;
+        height: 50px;
+        text-align: center;
+        float: right;
+    }
+
+    small {
+        display: block;
+        text-align: center;
+        color: gray
+    }
+</style>
+
+<body>
+
+
+    <h1>Summarizer</h1>
+    <small>Powered by gemini-2.0-flash</small><br><br>
+
+    <textarea name="question" id="question" placeholder="Write your text here to summarize..."></textarea><br><br><br>
+
+    <button onclick=answer() id="answer_button">Start Summarizing</button>
+    <label for="type">Summarize to: </label>
+    <select name="type" id="type">
+        <option value="points">Points</option>
+        <option value="para">Paragraph</option>
+    </select><br><br><br>
+    <label for="lines_points">Minimum Lines/Points</label>
+    <input type="number" id="lines_points"><br><br><br>
+
+    <textarea name="answer" id="answer" placeholder="Summary will be displayed here..."></textarea>
+    <script>
+        async function answer() {
+            document.getElementById("answer_button").disabled = true
+            const userInput = document.getElementById('question').value;
+            if (userInput.trim() === '') return;
+            const question = userInput;
+            const type = document.getElementById("type").value;
+            const num_of_lines_points = document.getElementById("lines_points").value;
+            try {
+                const response = await fetch("/summarize", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/x-www-form-urlencoded"
+                    },
+                    body: new URLSearchParams({ question: question, type: type, num_of_lines_points: num_of_lines_points })
+                });
+                const data = await response.json();
+                const answer_area = document.getElementById("answer");
+                if (data.answer) {
+                    aiResponse = data.answer;
+                } else if (data.error) {
+                    aiResponse = "Error: " + data.error;
+                }
+                answer_area.value = aiResponse
+            } catch (err) {
+                console.error("Fetch Error:", err);
+                document.getElementById("answer").value = err;
+            }
+            document.getElementById("answer_button").disabled = false
+        }
+    </script>
+</body>
+
+</html>

templates/think.html

@@ -0,0 +1,370 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Think | TaskBot v1+ AI</title>
+    <script src="https://kit.fontawesome.com/cda0e70b18.js" crossorigin="anonymous"></script>
+    <link rel="Icon" href="TaskBot logo.png">
+    <link rel="manifest" href="/static/manifest.json">
+</head>
+
+<style>
+    body {
+        background-color: #2f2f2f;
+        font-family: Arial, sans-serif;
+        color: white;
+        margin: 0;
+        padding: 20px;
+        background: url("{{ url_for('static', filename='images/black bg.jpeg') }}");
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-attachment: fixed;
+        background-position: center center;
+    }
+
+    nav {
+        background-color: #444;
+        padding: 5px;
+        border-radius: 5px;
+        width: 100%;
+        height: auto;
+        top: 0;
+    }
+
+    .sticky {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        z-index: 1000;
+    }
+
+    .sticky2 {
+        position: absolute;
+        top: 20px;
+        right: 80px;
+        z-index: 1000;
+    }
+
+    .sticky3 {
+        position: absolute;
+        top: 20px;
+        right: 140px;
+        z-index: 1000;
+    }
+
+    /* Dropdown Styles */
+    .dropdown {
+        position: relative;
+        display: inline-block;
+    }
+
+    .btn {
+        background-color: transparent;
+        color: white;
+        border: none;
+        cursor: pointer;
+    }
+
+    .btn:hover {
+        background-color: #494949;
+    }
+
+    .dropdown-content {
+        display: none;
+        position: absolute;
+        right: 0;
+        background-color: transparent;
+        backdrop-filter: blur(5px);
+        border: 1px solid black;
+        min-width: 160px;
+        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
+        z-index: 1;
+        text-align: center;
+    }
+
+    .dropdown-content h3 {
+        margin: 5px 0;
+        color: white;
+        text-align: center;
+    }
+
+    .dropdown-content a {
+        color: white;
+        padding: 12px 16px;
+        text-decoration: none;
+        display: block;
+        border-top: 1px solid transparent;
+    }
+
+    .dropdown-content a:hover {
+        background-color: #bebebe;
+    }
+
+    .dropdown:hover .dropdown-content {
+        display: block;
+    }
+
+    main {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: calc(100vh - 100px);
+        /* adjust if header height changes */
+        text-align: center;
+    }
+
+    /* Input and Button Styles */
+    #question {
+        padding: 10px;
+        font-size: 16px;
+        border-radius: 5px;
+        border: 1px solid #ccc;
+        margin-right: 10px;
+    }
+
+    .ai,
+    .user {
+        background-color: transparent;
+        backdrop-filter: blur(5px);
+        padding: 10px;
+        padding-right: 10px;
+        border-radius: 5px;
+        border: solid #ccc;
+        margin: 10px;
+        text-align: center;
+        justify-content: right;
+        width: 40%;
+        color: rgb(227, 227, 227)
+    }
+
+    .text1 {
+        display: flex;
+        justify-content: right;
+        align-items: center;
+        margin: 10px;
+    }
+
+    .text2 {
+        display: flex;
+        justify-content: left;
+        align-items: center;
+        margin: 10px;
+    }
+
+    .chat-input-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 20px;
+    }
+
+    #sendButton {
+        margin-left: 10px;
+        padding: 10px 20px;
+        border: none;
+        border-radius: 5px;
+        background-color: #fff;
+        cursor: pointer;
+        transition: background-color 0.3s;
+    }
+
+    #sendButton:hover {
+        background-color: #e0e0e0;
+    }
+
+    .inputWrapper {
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        position: fixed;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        gap: 10px;
+        z-index: 1000;
+    }
+
+    .inputWrapper input {
+        width: 100%;
+        padding: 10px;
+    }
+
+    .tools button {
+        font-size: 18px;
+        padding: 10px 20px;
+        border-radius: 50px;
+        cursor: pointer;
+    }
+
+    #welcomeMessage {
+        text-align: center;
+        margin-top: 20%;
+    }
+
+    .tools-content {
+        display: none;
+
+    }
+
+    .tools:hover {
+        .tools-content {
+            display: block
+        }
+    }
+</style>
+
+<body>
+    <H1 id="welcomeMessage">Hello 👋, what can I help with?</H1>
+    <div id="chatArea">
+        <div class="text1">
+            <div class="user" style="display: none;"></div>
+        </div>
+        <div class="text2">
+            <div class="ai" style="display: none;"></div>
+        </div>
+    </div>
+
+    <main>
+        <div class="inputWrapper">
+            <input type="text" id="userInput" placeholder="Type your message here..."
+                style="width: 200px;color: white; backdrop-filter: blur(100px);background-color: transparent; border-radius: 50px;border: 1px solid #ccc;margin-right: 10px;margin-left: 10px;">
+            <div
+                style="display: flex; flex-direction: row; gap: 10px; margin-top: 10px; width: 100%; justify-content: center;">
+                <div class="tools">
+                    <div class="tools-content">
+                        <a href="/write"><button
+                                style="color: greenyellow;background-color: black;">Write</button></a><br>
+                        <a href="/summarize"><button
+                                style="color: greenyellow;background-color: black;">Summarize</button></a><br>
+                        <a href="/translate"><button
+                                style="color: greenyellow;background-color: black;">Translate</button></a><br>
+                        <a href="/imagine"><button
+                                style="color: greenyellow;background-color: black;">Imagine</button></a><br>
+                    </div>
+                    <button style="background-color: black;">
+                        <i class="fa-solid fa-sliders fa-2xl" style="color: #63E6BE;"></i>
+                    </button>
+                </div>
+                <button id="sendButton" onclick="answer()"
+                    style="font-weight: bold; background-color: black; color: greenyellow">&#8593</button>
+            </div>
+        </div>
+    </main>
+
+    <script>
+
+        async function answer() {
+            document.getElementById("sendButton").disabled = true
+            const welcomeMessage = document.getElementById('welcomeMessage');
+            welcomeMessage.style.display = 'none'; // Hide the welcome message 
+            const userInput = document.getElementById('userInput').value;
+            if (userInput.trim() === '') return;
+            // Create wrapper for text1 (User message)
+            const text1 = document.createElement('div');
+            text1.className = 'text1';
+            const userMessage = document.createElement('div');
+            userMessage.className = 'user';
+            userMessage.textContent = userInput;
+            text1.appendChild(userMessage);
+            // Append user message to the chat area
+            document.getElementById('chatArea').appendChild(text1);
+            // Clear input
+            document.getElementById('userInput').value = '';
+            const question = userInput; // Use the already retrieved value
+            // Send a POST request to the /ask route
+            const response = await fetch("/think", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/x-www-form-urlencoded"
+                },
+                body: new URLSearchParams({ question: question })
+            });
+            const data = await response.json();
+            // Create wrapper for text2 (AI response)
+            const text2 = document.createElement('div');
+            text2.className = 'text2';
+            const aiResponse = document.createElement('div');
+            aiResponse.className = 'ai';
+            if (data.answer) {
+                aiResponse.textContent = data.answer;
+            } else if (data.error) {
+                aiResponse.textContent = "Error: " + data.error;
+            }
+            text2.appendChild(aiResponse);
+            // Append AI response to the chat area
+            document.getElementById('chatArea').appendChild(text2);
+            document.getElementById("sendButton").disabled = false
+        }
+        if ("serviceWorker" in navigator) {
+            navigator.serviceWorker
+                .register("/static/service-worker.js")
+                .then(() => console.log("Service Worker Registered"))
+                .catch((err) => console.error("SW registration failed:", err));
+        }
+
+        document.getElementById("theme").addEventListener("click", () => {
+            if (document.getElementsByTagName("body")[0].style.backgroundColor === "black") {
+                document.getElementsByTagName("body")[0].style.backgroundColor = "#2f2f2f";
+                document.getElementById("theme").textContent = "Theme: ☀️ (Light)";
+                document.getElementById("welcomeMessage").style.color = "black";
+                document.getElementsByTagName("body")[0].style.backgroundImage = "url({{ url_for('static', filename='images/light bg.jpeg') }})";
+                document.getElementById("drop-down-h3-menu").style.color = "black"
+                document.getElementById("drop-down-h3-settings").style.color = "black"
+                document.getElementById("drop-down-h3-warnings").style.color = "black"
+                document.getElementById("btn").style.color = "black"
+                document.querySelectorAll(".user").forEach(element => {
+                    element.style.color = "black"
+                });
+                document.querySelectorAll(".ai").forEach(element => {
+                    element.style.color = "black"
+                })
+                document.querySelectorAll(".dropdown-content a").forEach(element => {
+                    element.style.color = "black"
+                })
+                document.getElementById("i_class").style.color = "black";
+                document.querySelectorAll(".dropdown-content p").forEach(element => {
+                    element.style.color = "black"
+                })
+                document.getElementById("i_class_2").style.color = "black";
+                document.getElementsByTagName("h2")[0].style.color = "black";
+            } else {
+                document.getElementsByTagName("body")[0].style.backgroundColor = "black";
+                document.getElementById("theme").textContent = "Theme: 🌙 (Dark)";
+                document.getElementById("welcomeMessage").style.color = "white";
+                document.getElementsByTagName("body")[0].style.backgroundImage = "url({{ url_for('static', filename='images/black bg.jpeg') }})";
+                document.getElementById("drop-down-h3-menu").style.color = "white"
+                document.getElementById("drop-down-h3-settings").style.color = "white"
+                document.getElementById("drop-down-h3-warnings").style.color = "white"
+                document.querySelectorAll(".user").forEach(elements => {
+                    elements.style.color = "white"
+                })
+                document.querySelectorAll(".ai").forEach(elements => {
+                    elements.style.color = "white"
+                })
+                document.getElementById("btn").style.color = "white"
+                document.querySelectorAll(".dropdown-content a").forEach(element => {
+                    element.style.color = "white"
+                })
+                document.getElementById("i_class").style.color = "white";
+                document.querySelectorAll(".dropdown-content p").forEach(element => {
+                    element.style.color = "white"
+                })
+                document.getElementById("i_class_2").style.color = "white";
+                document.getElementsByTagName("h2")[0].style.color = "white";
+            }
+        })
+        document.getElementById("userInput").addEventListener("keypress", () => {
+            if (event.key === "Enter") {
+                sendButton.click()
+            }
+        })
+    </script>
+
+</body>
+
+</html>

templates/translate.html

@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Translate | TaskBot v1+ AI</title>
+    <link rel="Icon" href="TaskBot logo.png">
+</head>
+<style>
+    body {
+        background-color: #2f2f2f;
+        font-family: Arial, sans-serif;
+        color: white;
+        margin: 0;
+        padding: 20px;
+    }
+
+    h1 {
+        text-align: center;
+    }
+
+    input {
+        width: 100%;
+        border-radius: 50px;
+        background-color: white;
+        color: black;
+        height: 40px;
+        font-size: large;
+    }
+
+    label {
+        color: white;
+    }
+
+    textarea {
+        width: 100%;
+        font-size: x-large;
+        height: 100px;
+        user-select: none;
+    }
+
+    button {
+        width: 100px;
+        height: 50px;
+        text-align: center;
+        float: right;
+    }
+
+    small {
+        display: block;
+        text-align: center;
+        color: gray;
+    }
+</style>
+
+<body>
+
+    <h1>Translator</h1>
+    <small>Powered by gemini-2.0-flash</small><br><br>
+
+    <label for="question">Text:</label>
+    <input type=" text" id="question" placeholder="Type your text here..."><br><br>
+
+    <label for="from">Translate From: </label>
+    <input type="text" id="from" style="width: 200px; height: auto;"><br><br><br>
+    <label for="to">Translate To: </label>
+    <input type="text" id="to" style="width: 200px; height: auto;"><br><br><br>
+
+    <button onclick=answer() id="answer_button">Start Translating</button><br><br><br>
+
+    <textarea name="answer" id="answer" placeholder="Your answer will be displayed here..."></textarea>
+
+
+    <script>
+        document.getElementById("from").value = "Auto Detect"
+        async function answer() {
+            document.getElementById("answer_button").disabled = true
+            const userInput = document.getElementById('question').value;
+            if (userInput.trim() === '') return;
+            const question = userInput;
+            const translate_from = document.getElementById("from").value;
+            const translate_to = document.getElementById("to").value;
+            const response = await fetch("/translate", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/x-www-form-urlencoded"
+                },
+                body: new URLSearchParams({ question: question, translate_from: translate_from, translate_to: translate_to })
+            });
+            const data = await response.json();
+            const answer_area = document.getElementById("answer");
+            if (data.answer) {
+                aiResponse = data.answer;
+                answer_area.value = aiResponse
+            } else if (data.error) {
+                aiResponse = "Error: " + data.error;
+                answer_area.value = aiResponse
+            }
+            document.getElementById("answer_button").disabled = false
+        }
+    </script>
+</body>
+
+</html>

templates/write.html

@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Write | TaskBot v1+ AI</title>
+    <link rel="Icon" href="TaskBot logo.png">
+    </link>
+</head>
+<style>
+    body {
+        background-color: #2f2f2f;
+        font-family: Arial, sans-serif;
+        color: white;
+        margin: 0;
+        padding: 20px;
+    }
+
+    h1 {
+        text-align: center;
+    }
+
+    #topic {
+        width: 100%;
+        border-radius: 50px;
+        background-color: white;
+        color: black;
+        height: 40px;
+        font-size: large;
+    }
+
+    select {
+        border-radius: 50px;
+    }
+
+    input {
+        border-radius: 50px;
+    }
+
+    textarea {
+        height: 300px;
+        width: 100%;
+    }
+
+    button {
+        width: 100px;
+        height: 50px;
+        text-align: center;
+        float: right;
+    }
+
+    small {
+        color: gray;
+        display: block;
+        text-align: center;
+    }
+</style>
+
+<body>
+    <h1>Write Mate</h1>
+    <small>Powered by gemini-2.0-flash</small>
+
+    <lable for="topic">Topic:</lable>
+    <input type="text" id="topic"><br><br><br>
+
+    <label for="fruits">Type: </label>
+    <select id="type" name="type">
+        <option value="para">Paragraph</option>
+        <option value="essay">Essay</option>
+        <option value="speech">Speech</option>
+    </select><br><br><br>
+
+    <label for="word-limit">Word Limit: </label>
+    <input type="number" id="word-limit"><br><br><br>
+
+    <button onclick=answer() id="answer_button">Start Writing</button><br><br>
+
+    <textarea name="answer" id="answer" placeholder="Your answer will be displayed here..."></textarea>
+
+    <script>
+        async function answer() {
+            document.getElementById("answer_button").disabled = true
+            const userInput = document.getElementById('topic').value;
+            if (userInput.trim() === '') return;
+
+            const word_limit = document.getElementById("word-limit").value;
+            const type = document.getElementById("type").value;
+
+            try {
+                const response = await fetch("/write", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/x-www-form-urlencoded" },
+                    body: new URLSearchParams({ question: userInput, word_limit: word_limit, type: type })
+                });
+
+                const data = await response.json();
+                console.log("Server Response:", data); // DEBUG LINE
+
+                const answer_area = document.getElementById("answer");
+                if (data.answer) {
+                    answer_area.value = data.answer; // set textarea value
+                } else if (data.error) {
+                    answer_area.value = "Error: " + data.error;
+                }
+            } catch (err) {
+                console.error("Fetch Error:", err);
+                document.getElementById("answer").value = err;
+            }
+            document.getElementById("answer_button").disabled = false
+        }
+
+    </script>
+</body>
+
+</html>