Upload 14 files
Browse files- 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
@@ -0,0 +1,12 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
// background.js
|
2 |
+
|
3 |
+
// Example: Listen for a message from the content script and respond
|
4 |
+
browser.runtime.onMessage.addListener(function (message, sender, sendResponse) {
|
5 |
+
if (message.action === 'promptUser') {
|
6 |
+
// Send a message to the content script to prompt the user for input
|
7 |
+
browser.tabs.query({ active: true, currentWindow: true }, function (tabs) {
|
8 |
+
const activeTab = tabs[0];
|
9 |
+
browser.tabs.sendMessage(activeTab.id, { action: 'promptUser' });
|
10 |
+
});
|
11 |
+
}
|
12 |
+
});
|
Firefox-extension/firefox_v2/app.py
ADDED
@@ -0,0 +1,37 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import os
|
2 |
+
from flask import Flask, request, jsonify
|
3 |
+
#from flask_wtf.csrf import CSRFProtect
|
4 |
+
from groq import Groq
|
5 |
+
from dotenv import load_dotenv
|
6 |
+
load_dotenv()
|
7 |
+
|
8 |
+
groq_api_key = os.getenv("GROQ_API_KEY")
|
9 |
+
|
10 |
+
app = Flask(__name__)
|
11 |
+
#csrf = CSRFProtect(app)
|
12 |
+
groq = Groq(api_key=groq_api_key)
|
13 |
+
|
14 |
+
|
15 |
+
@app.route('/')
|
16 |
+
def index():
|
17 |
+
return "Llama Helper"
|
18 |
+
|
19 |
+
@app.route('/get_chat_completion', methods=['POST'])
|
20 |
+
def get_chat_completion():
|
21 |
+
data = request.json
|
22 |
+
message = data['message']
|
23 |
+
# Use the Groq SDK to get chat completion
|
24 |
+
chat_completion = groq.chat.completions.create(
|
25 |
+
model= "llama2-70b-4096",
|
26 |
+
messages=[{"role": "user", "content": message}]
|
27 |
+
)
|
28 |
+
|
29 |
+
return jsonify({"completion": chat_completion.choices[0].message.content})
|
30 |
+
|
31 |
+
# except ValueError as e:
|
32 |
+
# return jsonify({"error": str(e)}), 400
|
33 |
+
# except Exception as e:
|
34 |
+
# return jsonify({"error": str(e)}), 500
|
35 |
+
|
36 |
+
if __name__ == '__main__':
|
37 |
+
app.run(debug=True, port=8001)
|
Firefox-extension/firefox_v2/index.html
ADDED
@@ -0,0 +1,25 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html lang="en">
|
3 |
+
<head>
|
4 |
+
<meta charset="UTF-8">
|
5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6 |
+
<title>Llama Helper</title>
|
7 |
+
<link rel="stylesheet" href="styles.css">
|
8 |
+
</head>
|
9 |
+
<body>
|
10 |
+
<div id="chat-container">
|
11 |
+
<div id="chat-header">
|
12 |
+
<img src="llama-icon.png" alt="Llama Icon" id="llama-icon">
|
13 |
+
<h1>Llama Helper</h1>
|
14 |
+
</div>
|
15 |
+
<div id="chat-history">
|
16 |
+
<!-- Chat history will be populated dynamically -->
|
17 |
+
</div>
|
18 |
+
<div id="chat-input">
|
19 |
+
<input type="text" id="user-input" placeholder="Type a message...">
|
20 |
+
<button id="send-button">Send</button>
|
21 |
+
</div>
|
22 |
+
</div>
|
23 |
+
<script src="scripts.js"></script>
|
24 |
+
</body>
|
25 |
+
</html>
|
Firefox-extension/firefox_v2/llama-icon.png
ADDED
Firefox-extension/firefox_v2/manifest.json
ADDED
@@ -0,0 +1,25 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
{
|
2 |
+
"manifest_version": 3,
|
3 |
+
"name": "Llama Helper",
|
4 |
+
"version": "1.0",
|
5 |
+
"description": "A Firefox extension that helps you chat with a llama .",
|
6 |
+
"icons": {
|
7 |
+
"128": "llama-icon.png"
|
8 |
+
},
|
9 |
+
"action": {
|
10 |
+
"default_popup": "index.html",
|
11 |
+
"default_icon": {
|
12 |
+
"128": "llama-icon.png"
|
13 |
+
}
|
14 |
+
},
|
15 |
+
"permissions": [
|
16 |
+
"activeTab"
|
17 |
+
],
|
18 |
+
"web_accessible_resources": [
|
19 |
+
"styles.css",
|
20 |
+
"scripts.js"
|
21 |
+
],
|
22 |
+
"content_security_policy": {
|
23 |
+
"extension_pages": "script-src 'self'; object-src 'self'"
|
24 |
+
}
|
25 |
+
}
|
Firefox-extension/firefox_v2/requirements.txt
ADDED
@@ -0,0 +1,3 @@
|
|
|
|
|
|
|
|
|
1 |
+
Flask
|
2 |
+
groq
|
3 |
+
python-dotenv
|
Firefox-extension/firefox_v2/rest_api.py
ADDED
@@ -0,0 +1,25 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
from flask import Flask, request, jsonify
|
2 |
+
from groq import Groq
|
3 |
+
|
4 |
+
app = Flask(__name__)
|
5 |
+
|
6 |
+
# Groq client initialization (assume it's done elsewhere)
|
7 |
+
groq = Groq(api_key="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")
|
8 |
+
|
9 |
+
# Route for chat completion (uses POST for creating data)
|
10 |
+
@app.route('/chat/completion', methods=['POST'])
|
11 |
+
def get_chat_completion():
|
12 |
+
data = request.get_json()
|
13 |
+
if not data or 'message' not in data:
|
14 |
+
return jsonify({"error": "Missing required field 'message' in request body"}), 400
|
15 |
+
|
16 |
+
message = data['message']
|
17 |
+
chat_completion = groq.chat.completions.create(
|
18 |
+
model="llama2-70b-4096",
|
19 |
+
messages=[{"role": "user", "content": message}]
|
20 |
+
)
|
21 |
+
|
22 |
+
return jsonify({"completion": chat_completion.choices[0].message.content})
|
23 |
+
|
24 |
+
if __name__ == '__main__':
|
25 |
+
app.run(debug=True, port=8001)
|
Firefox-extension/firefox_v2/scripts.js
ADDED
@@ -0,0 +1,42 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
document.addEventListener("DOMContentLoaded", function() {
|
2 |
+
const chatHistory = document.getElementById("chat-history");
|
3 |
+
const userInput = document.getElementById("user-input");
|
4 |
+
const sendButton = document.getElementById("send-button");
|
5 |
+
|
6 |
+
sendButton.addEventListener("click", function() {
|
7 |
+
const userMessage = userInput.value.trim();
|
8 |
+
if (userMessage !== "") {
|
9 |
+
appendMessage(userMessage, true);
|
10 |
+
userInput.value = "";
|
11 |
+
sendMessageToPythonAnywhere(userMessage);
|
12 |
+
}
|
13 |
+
});
|
14 |
+
|
15 |
+
function appendMessage(message, isUser) {
|
16 |
+
const messageElement = document.createElement("div");
|
17 |
+
messageElement.classList.add("message", isUser ? "user-message" : "bot-message");
|
18 |
+
messageElement.textContent = message;
|
19 |
+
chatHistory.appendChild(messageElement);
|
20 |
+
chatHistory.scrollTop = chatHistory.scrollHeight;
|
21 |
+
}
|
22 |
+
|
23 |
+
async function sendMessageToPythonAnywhere(message) {
|
24 |
+
try {
|
25 |
+
const response = await fetch('YOUR_PYTHONANYWHERE_API_ENDPOINT', {
|
26 |
+
method: 'POST',
|
27 |
+
headers: {
|
28 |
+
'Content-Type': 'application/json'
|
29 |
+
},
|
30 |
+
body: JSON.stringify({ message: message })
|
31 |
+
});
|
32 |
+
if (!response.ok) {
|
33 |
+
throw new Error('Network response was not ok');
|
34 |
+
}
|
35 |
+
const data = await response.json();
|
36 |
+
const botResponse = data.message;
|
37 |
+
appendMessage(botResponse, false);
|
38 |
+
} catch (error) {
|
39 |
+
console.error('Error:', error);
|
40 |
+
}
|
41 |
+
}
|
42 |
+
});
|
Firefox-extension/firefox_v2/styles.css
ADDED
@@ -0,0 +1,89 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/* styles.css */
|
2 |
+
|
3 |
+
body {
|
4 |
+
font-family: Arial, sans-serif;
|
5 |
+
background-color: #f0f0f0;
|
6 |
+
margin: 0;
|
7 |
+
padding: 0;
|
8 |
+
}
|
9 |
+
|
10 |
+
#chat-container {
|
11 |
+
max-width: 400px;
|
12 |
+
margin: 20px auto;
|
13 |
+
background-color: #fff;
|
14 |
+
border-radius: 10px;
|
15 |
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
16 |
+
overflow: hidden;
|
17 |
+
}
|
18 |
+
|
19 |
+
#chat-header {
|
20 |
+
background-color: #6cb2eb;
|
21 |
+
color: #fff;
|
22 |
+
padding: 15px;
|
23 |
+
display: flex;
|
24 |
+
align-items: center;
|
25 |
+
}
|
26 |
+
|
27 |
+
#llama-icon {
|
28 |
+
width: 40px;
|
29 |
+
height: 40px;
|
30 |
+
margin-right: 10px;
|
31 |
+
}
|
32 |
+
|
33 |
+
#chat-header h1 {
|
34 |
+
margin: 0;
|
35 |
+
font-size: 24px;
|
36 |
+
}
|
37 |
+
|
38 |
+
#chat-history {
|
39 |
+
padding: 15px;
|
40 |
+
height: 300px;
|
41 |
+
overflow-y: scroll;
|
42 |
+
}
|
43 |
+
|
44 |
+
#chat-input {
|
45 |
+
padding: 15px;
|
46 |
+
display: flex;
|
47 |
+
align-items: center;
|
48 |
+
background-color: #f5f5f5;
|
49 |
+
}
|
50 |
+
|
51 |
+
#user-input {
|
52 |
+
flex: 1;
|
53 |
+
padding: 10px;
|
54 |
+
border: none;
|
55 |
+
border-radius: 20px;
|
56 |
+
margin-right: 10px;
|
57 |
+
}
|
58 |
+
|
59 |
+
#send-button {
|
60 |
+
background-color: #6cb2eb;
|
61 |
+
color: #fff;
|
62 |
+
border: none;
|
63 |
+
padding: 10px 20px;
|
64 |
+
border-radius: 20px;
|
65 |
+
cursor: pointer;
|
66 |
+
transition: background-color 0.3s ease;
|
67 |
+
}
|
68 |
+
|
69 |
+
#send-button:hover {
|
70 |
+
background-color: #4a8dc2;
|
71 |
+
}
|
72 |
+
|
73 |
+
.user-message {
|
74 |
+
background-color: #e2f1fc;
|
75 |
+
border-radius: 20px;
|
76 |
+
padding: 10px 15px;
|
77 |
+
margin-bottom: 10px;
|
78 |
+
max-width: 70%;
|
79 |
+
word-wrap: break-word;
|
80 |
+
}
|
81 |
+
|
82 |
+
.bot-message {
|
83 |
+
background-color: #f5f5f5;
|
84 |
+
border-radius: 20px;
|
85 |
+
padding: 10px 15px;
|
86 |
+
margin-bottom: 10px;
|
87 |
+
max-width: 70%;
|
88 |
+
word-wrap: break-word;
|
89 |
+
}
|
Firefox-extension/icon.png
ADDED
Firefox-extension/manifest.json
ADDED
@@ -0,0 +1,28 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
{
|
2 |
+
"manifest_version": 3,
|
3 |
+
"name": "Llama Helper",
|
4 |
+
"version": "1.0",
|
5 |
+
"description": "AI POWERED QnA.",
|
6 |
+
"permissions": ["activeTab"],
|
7 |
+
"background": {
|
8 |
+
"service_worker": "background.js"
|
9 |
+
},
|
10 |
+
"action": {
|
11 |
+
"default_popup": "popup.html",
|
12 |
+
"default_icon": {
|
13 |
+
"16": "icon.png",
|
14 |
+
"48": "icon.png",
|
15 |
+
"128": "icon.png"
|
16 |
+
}
|
17 |
+
},
|
18 |
+
"icons": {
|
19 |
+
"128": "icon.png"
|
20 |
+
},
|
21 |
+
"content_scripts": [
|
22 |
+
{
|
23 |
+
"matches": ["<all_urls>"],
|
24 |
+
"js": ["popup.js"]
|
25 |
+
}
|
26 |
+
]
|
27 |
+
}
|
28 |
+
|
Firefox-extension/popup.css
ADDED
@@ -0,0 +1,42 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
body {
|
2 |
+
font-family: Arial, sans-serif;
|
3 |
+
margin: 20px;
|
4 |
+
}
|
5 |
+
|
6 |
+
.container {
|
7 |
+
max-width: 300px;
|
8 |
+
}
|
9 |
+
|
10 |
+
textarea {
|
11 |
+
width: 100%;
|
12 |
+
margin-bottom: 10px;
|
13 |
+
}
|
14 |
+
|
15 |
+
button {
|
16 |
+
padding: 10px 20px;
|
17 |
+
background-color: #007bff;
|
18 |
+
color: #fff;
|
19 |
+
border: none;
|
20 |
+
cursor: pointer;
|
21 |
+
}
|
22 |
+
|
23 |
+
.message {
|
24 |
+
margin-bottom: 10px;
|
25 |
+
}
|
26 |
+
|
27 |
+
.user {
|
28 |
+
background-color: #f2f2f2;
|
29 |
+
padding: 10px;
|
30 |
+
border-radius: 10px;
|
31 |
+
}
|
32 |
+
|
33 |
+
.chatgpt {
|
34 |
+
background-color: #007bff;
|
35 |
+
color: #fff;
|
36 |
+
padding: 10px;
|
37 |
+
border-radius: 10px;
|
38 |
+
}
|
39 |
+
|
40 |
+
.copy-button {
|
41 |
+
margin-left: 10px;
|
42 |
+
}
|
Firefox-extension/popup.html
ADDED
@@ -0,0 +1,18 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html lang="en">
|
3 |
+
<head>
|
4 |
+
<meta charset="UTF-8">
|
5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6 |
+
<title>ChatGPT Extension</title>
|
7 |
+
<link rel="stylesheet" href="popup.css">
|
8 |
+
</head>
|
9 |
+
<body>
|
10 |
+
<div class="container">
|
11 |
+
<h1>Welcome to Llama Helper</h1>
|
12 |
+
<div id="conversation"></div>
|
13 |
+
<textarea id="input" rows="4" placeholder="Ask me anything..."></textarea>
|
14 |
+
<button id="submit">Submit</button>
|
15 |
+
</div>
|
16 |
+
<script src="popup.js"></script>
|
17 |
+
</body>
|
18 |
+
</html>
|
Firefox-extension/popup.js
ADDED
@@ -0,0 +1,80 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
// Function to send user input to ChatGPT API and handle response
|
2 |
+
async function sendMessageToChatGPT(message) {
|
3 |
+
try {
|
4 |
+
// Make a POST request to ChatGPT API with user input
|
5 |
+
const response = await fetch('https://api.openai.com/v1/chat/completions', {
|
6 |
+
method: 'POST',
|
7 |
+
headers: {
|
8 |
+
'Content-Type': 'application/json',
|
9 |
+
'Authorization': 'Bearer YOUR_OPENAI_API_KEY' // Replace with your OpenAI API key
|
10 |
+
},
|
11 |
+
body: JSON.stringify({
|
12 |
+
model: 'text-davinci-002', // Sample model for demonstration
|
13 |
+
messages: [{ role: 'user', content: message }]
|
14 |
+
})
|
15 |
+
});
|
16 |
+
|
17 |
+
// Parse the response JSON
|
18 |
+
const data = await response.json();
|
19 |
+
|
20 |
+
// Extract the response message from the API response
|
21 |
+
const chatGPTResponse = data.choices[0].message.content;
|
22 |
+
|
23 |
+
// Return the response message
|
24 |
+
return chatGPTResponse;
|
25 |
+
} catch (error) {
|
26 |
+
// Handle any errors that occur during the API request
|
27 |
+
console.error('Error sending message to ChatGPT:', error);
|
28 |
+
return 'Sorry, there was an error. Please try again later.';
|
29 |
+
}
|
30 |
+
}
|
31 |
+
|
32 |
+
// Function to display conversation message
|
33 |
+
function displayMessage(role, content) {
|
34 |
+
// Create message container
|
35 |
+
const messageContainer = document.createElement('div');
|
36 |
+
messageContainer.classList.add('message', role);
|
37 |
+
|
38 |
+
// Create message text
|
39 |
+
const messageText = document.createElement('span');
|
40 |
+
messageText.textContent = content;
|
41 |
+
|
42 |
+
// Create copy button
|
43 |
+
const copyButton = document.createElement('button');
|
44 |
+
copyButton.textContent = 'Copy';
|
45 |
+
copyButton.classList.add('copy-button');
|
46 |
+
|
47 |
+
// Add click event listener to copy button
|
48 |
+
copyButton.addEventListener('click', function () {
|
49 |
+
// Copy message content to clipboard
|
50 |
+
navigator.clipboard.writeText(content)
|
51 |
+
.then(() => {
|
52 |
+
console.log('Content copied to clipboard:', content);
|
53 |
+
})
|
54 |
+
.catch((error) => {
|
55 |
+
console.error('Failed to copy content to clipboard:', error);
|
56 |
+
});
|
57 |
+
});
|
58 |
+
|
59 |
+
// Append elements to message container
|
60 |
+
messageContainer.appendChild(messageText);
|
61 |
+
messageContainer.appendChild(copyButton);
|
62 |
+
|
63 |
+
// Append message container to conversation
|
64 |
+
document.getElementById('conversation').appendChild(messageContainer);
|
65 |
+
}
|
66 |
+
|
67 |
+
// Event listener for submit button click
|
68 |
+
document.getElementById('submit').addEventListener('click', async function () {
|
69 |
+
const userInput = document.getElementById('input').value.trim();
|
70 |
+
if (userInput !== '') {
|
71 |
+
// Display user's message
|
72 |
+
displayMessage('user', userInput);
|
73 |
+
|
74 |
+
// Send user input to ChatGPT API and get response
|
75 |
+
const chatGPTResponse = await sendMessageToChatGPT(userInput);
|
76 |
+
|
77 |
+
// Display ChatGPT's response
|
78 |
+
displayMessage('chatgpt', chatGPTResponse);
|
79 |
+
}
|
80 |
+
});
|