Upload 14 files

Browse files

Files changed (14) hide show

Firefox-extension/background.js +12 -0
Firefox-extension/firefox_v2/app.py +37 -0
Firefox-extension/firefox_v2/index.html +25 -0
Firefox-extension/firefox_v2/llama-icon.png +0 -0
Firefox-extension/firefox_v2/manifest.json +25 -0
Firefox-extension/firefox_v2/requirements.txt +3 -0
Firefox-extension/firefox_v2/rest_api.py +25 -0
Firefox-extension/firefox_v2/scripts.js +42 -0
Firefox-extension/firefox_v2/styles.css +89 -0
Firefox-extension/icon.png +0 -0
Firefox-extension/manifest.json +28 -0
Firefox-extension/popup.css +42 -0
Firefox-extension/popup.html +18 -0
Firefox-extension/popup.js +80 -0

Firefox-extension/background.js ADDED Viewed

	@@ -0,0 +1,12 @@

+// background.js
+// Example: Listen for a message from the content script and respond
+browser.runtime.onMessage.addListener(function (message, sender, sendResponse) {
+    if (message.action === 'promptUser') {
+        // Send a message to the content script to prompt the user for input
+        browser.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+            const activeTab = tabs[0];
+            browser.tabs.sendMessage(activeTab.id, { action: 'promptUser' });
+        });
+    }
+});

Firefox-extension/firefox_v2/app.py ADDED Viewed

	@@ -0,0 +1,37 @@

+import os
+from flask import Flask, request, jsonify
+#from flask_wtf.csrf import CSRFProtect
+from groq import Groq
+from dotenv import load_dotenv
+load_dotenv()
+groq_api_key = os.getenv("GROQ_API_KEY")
+app = Flask(__name__)
+#csrf = CSRFProtect(app)
+groq = Groq(api_key=groq_api_key)
+@app.route('/')
+def index():
+    return "Llama Helper"
+@app.route('/get_chat_completion', methods=['POST'])
+def get_chat_completion():
+    data = request.json
+    message = data['message']
+        # Use the Groq SDK to get chat completion
+    chat_completion = groq.chat.completions.create(
+        model= "llama2-70b-4096",
+        messages=[{"role": "user", "content": message}]
+    )
+    return jsonify({"completion": chat_completion.choices[0].message.content})
+#    except ValueError as e:
+#        return jsonify({"error": str(e)}), 400
+#   except Exception as e:
+#       return jsonify({"error": str(e)}), 500
+if __name__ == '__main__':
+    app.run(debug=True, port=8001)

Firefox-extension/firefox_v2/index.html ADDED Viewed

	@@ -0,0 +1,25 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Llama Helper</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="chat-container">
+        <div id="chat-header">
+            <img src="llama-icon.png" alt="Llama Icon" id="llama-icon">
+            <h1>Llama Helper</h1>
+        </div>
+        <div id="chat-history">
+            <!-- Chat history will be populated dynamically -->
+        </div>
+        <div id="chat-input">
+            <input type="text" id="user-input" placeholder="Type a message...">
+            <button id="send-button">Send</button>
+        </div>
+    </div>
+    <script src="scripts.js"></script>
+</body>
+</html>

Firefox-extension/firefox_v2/llama-icon.png ADDED Viewed

Firefox-extension/firefox_v2/manifest.json ADDED Viewed

	@@ -0,0 +1,25 @@

+{
+    "manifest_version": 3,
+    "name": "Llama Helper",
+    "version": "1.0",
+    "description": "A Firefox extension that helps you chat with a llama .",
+    "icons": {
+        "128": "llama-icon.png"
+    },
+    "action": {
+        "default_popup": "index.html",
+        "default_icon": {
+            "128": "llama-icon.png"
+        }
+    },
+    "permissions": [
+        "activeTab"
+    ],
+    "web_accessible_resources": [
+        "styles.css",
+        "scripts.js"
+    ],
+    "content_security_policy": {
+        "extension_pages": "script-src 'self'; object-src 'self'"
+    }
+}

Firefox-extension/firefox_v2/requirements.txt ADDED Viewed

	@@ -0,0 +1,3 @@

+Flask
+groq
+python-dotenv

Firefox-extension/firefox_v2/rest_api.py ADDED Viewed

	@@ -0,0 +1,25 @@

+from flask import Flask, request, jsonify
+from groq import Groq
+app = Flask(__name__)
+# Groq client initialization (assume it's done elsewhere)
+groq = Groq(api_key="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")
+# Route for chat completion (uses POST for creating data)
+@app.route('/chat/completion', methods=['POST'])
+def get_chat_completion():
+  data = request.get_json()
+  if not data or 'message' not in data:
+    return jsonify({"error": "Missing required field 'message' in request body"}), 400
+  message = data['message']
+  chat_completion = groq.chat.completions.create(
+      model="llama2-70b-4096",
+      messages=[{"role": "user", "content": message}]
+  )
+  return jsonify({"completion": chat_completion.choices[0].message.content})
+if __name__ == '__main__':
+  app.run(debug=True, port=8001)

Firefox-extension/firefox_v2/scripts.js ADDED Viewed

	@@ -0,0 +1,42 @@

+document.addEventListener("DOMContentLoaded", function() {
+    const chatHistory = document.getElementById("chat-history");
+    const userInput = document.getElementById("user-input");
+    const sendButton = document.getElementById("send-button");
+    sendButton.addEventListener("click", function() {
+        const userMessage = userInput.value.trim();
+        if (userMessage !== "") {
+            appendMessage(userMessage, true);
+            userInput.value = "";
+            sendMessageToPythonAnywhere(userMessage);
+        }
+    });
+    function appendMessage(message, isUser) {
+        const messageElement = document.createElement("div");
+        messageElement.classList.add("message", isUser ? "user-message" : "bot-message");
+        messageElement.textContent = message;
+        chatHistory.appendChild(messageElement);
+        chatHistory.scrollTop = chatHistory.scrollHeight;
+    }
+    async function sendMessageToPythonAnywhere(message) {
+        try {
+            const response = await fetch('YOUR_PYTHONANYWHERE_API_ENDPOINT', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ message: message })
+            });
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            const data = await response.json();
+            const botResponse = data.message;
+            appendMessage(botResponse, false);
+        } catch (error) {
+            console.error('Error:', error);
+        }
+    }
+});

Firefox-extension/firefox_v2/styles.css ADDED Viewed

	@@ -0,0 +1,89 @@

+/* styles.css */
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+    margin: 0;
+    padding: 0;
+}
+#chat-container {
+    max-width: 400px;
+    margin: 20px auto;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+}
+#chat-header {
+    background-color: #6cb2eb;
+    color: #fff;
+    padding: 15px;
+    display: flex;
+    align-items: center;
+}
+#llama-icon {
+    width: 40px;
+    height: 40px;
+    margin-right: 10px;
+}
+#chat-header h1 {
+    margin: 0;
+    font-size: 24px;
+}
+#chat-history {
+    padding: 15px;
+    height: 300px;
+    overflow-y: scroll;
+}
+#chat-input {
+    padding: 15px;
+    display: flex;
+    align-items: center;
+    background-color: #f5f5f5;
+}
+#user-input {
+    flex: 1;
+    padding: 10px;
+    border: none;
+    border-radius: 20px;
+    margin-right: 10px;
+}
+#send-button {
+    background-color: #6cb2eb;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 20px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+#send-button:hover {
+    background-color: #4a8dc2;
+}
+.user-message {
+    background-color: #e2f1fc;
+    border-radius: 20px;
+    padding: 10px 15px;
+    margin-bottom: 10px;
+    max-width: 70%;
+    word-wrap: break-word;
+}
+.bot-message {
+    background-color: #f5f5f5;
+    border-radius: 20px;
+    padding: 10px 15px;
+    margin-bottom: 10px;
+    max-width: 70%;
+    word-wrap: break-word;
+}

Firefox-extension/icon.png ADDED Viewed

Firefox-extension/manifest.json ADDED Viewed

	@@ -0,0 +1,28 @@

+{
+    "manifest_version": 3,
+    "name": "Llama Helper",
+    "version": "1.0",
+    "description": "AI POWERED QnA.",
+    "permissions": ["activeTab"],
+    "background": {
+      "service_worker": "background.js"
+    },
+    "action": {
+      "default_popup": "popup.html",
+      "default_icon": {
+        "16": "icon.png",
+        "48": "icon.png",
+        "128": "icon.png"
+      }
+    },
+    "icons": {
+      "128": "icon.png"
+    },
+    "content_scripts": [
+      {
+        "matches": ["<all_urls>"],
+        "js": ["popup.js"]
+      }
+    ]
+  }

Firefox-extension/popup.css ADDED Viewed

	@@ -0,0 +1,42 @@

+body {
+    font-family: Arial, sans-serif;
+    margin: 20px;
+}
+.container {
+    max-width: 300px;
+}
+textarea {
+    width: 100%;
+    margin-bottom: 10px;
+}
+button {
+    padding: 10px 20px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+}
+.message {
+    margin-bottom: 10px;
+}
+.user {
+    background-color: #f2f2f2;
+    padding: 10px;
+    border-radius: 10px;
+}
+.chatgpt {
+    background-color: #007bff;
+    color: #fff;
+    padding: 10px;
+    border-radius: 10px;
+}
+.copy-button {
+    margin-left: 10px;
+}

Firefox-extension/popup.html ADDED Viewed

	@@ -0,0 +1,18 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChatGPT Extension</title>
+    <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Welcome to Llama Helper</h1>
+        <div id="conversation"></div>
+        <textarea id="input" rows="4" placeholder="Ask me anything..."></textarea>
+        <button id="submit">Submit</button>
+    </div>
+    <script src="popup.js"></script>
+</body>
+</html>

Firefox-extension/popup.js ADDED Viewed

	@@ -0,0 +1,80 @@

+// Function to send user input to ChatGPT API and handle response
+async function sendMessageToChatGPT(message) {
+    try {
+        // Make a POST request to ChatGPT API with user input
+        const response = await fetch('https://api.openai.com/v1/chat/completions', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': 'Bearer YOUR_OPENAI_API_KEY' // Replace with your OpenAI API key
+            },
+            body: JSON.stringify({
+                model: 'text-davinci-002', // Sample model for demonstration
+                messages: [{ role: 'user', content: message }]
+            })
+        });
+        // Parse the response JSON
+        const data = await response.json();
+        // Extract the response message from the API response
+        const chatGPTResponse = data.choices[0].message.content;
+        // Return the response message
+        return chatGPTResponse;
+    } catch (error) {
+        // Handle any errors that occur during the API request
+        console.error('Error sending message to ChatGPT:', error);
+        return 'Sorry, there was an error. Please try again later.';
+    }
+}
+// Function to display conversation message
+function displayMessage(role, content) {
+    // Create message container
+    const messageContainer = document.createElement('div');
+    messageContainer.classList.add('message', role);
+    // Create message text
+    const messageText = document.createElement('span');
+    messageText.textContent = content;
+    // Create copy button
+    const copyButton = document.createElement('button');
+    copyButton.textContent = 'Copy';
+    copyButton.classList.add('copy-button');
+    // Add click event listener to copy button
+    copyButton.addEventListener('click', function () {
+        // Copy message content to clipboard
+        navigator.clipboard.writeText(content)
+            .then(() => {
+                console.log('Content copied to clipboard:', content);
+            })
+            .catch((error) => {
+                console.error('Failed to copy content to clipboard:', error);
+            });
+    });
+    // Append elements to message container
+    messageContainer.appendChild(messageText);
+    messageContainer.appendChild(copyButton);
+    // Append message container to conversation
+    document.getElementById('conversation').appendChild(messageContainer);
+}
+// Event listener for submit button click
+document.getElementById('submit').addEventListener('click', async function () {
+    const userInput = document.getElementById('input').value.trim();
+    if (userInput !== '') {
+        // Display user's message
+        displayMessage('user', userInput);
+        // Send user input to ChatGPT API and get response
+        const chatGPTResponse = await sendMessageToChatGPT(userInput);
+        // Display ChatGPT's response
+        displayMessage('chatgpt', chatGPTResponse);
+    }
+});