Spaces:

naveen2308
/

AITabOverview

Sleeping

App Files Files Community

Shaik-Mohammad-Kaif commited on Oct 5, 2024

Commit

8dc8901

0 Parent(s):

Initial commit of project files

Browse files

Files changed (8) hide show

.gitignore +3 -0
app.py +52 -0
icons/OverviewIcon.jpeg +0 -0
manifest.json +31 -0
pop.css +10 -0
popup.html +308 -0
popup.js +134 -0
templates/popup.html +274 -0

.gitignore ADDED Viewed

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

+__pycache__/
+venv/
+*.pyc

app.py ADDED Viewed

	@@ -0,0 +1,52 @@

+from flask import Flask, jsonify, request,render_template
+from flask_cors import CORS
+from bs4 import BeautifulSoup
+import google.generativeai as genai
+app = Flask(__name__)
+CORS(app)
+# Configure and initialize your AI model
+genai.configure(api_key="AIzaSyCZVlIW9i4nCb7EDLdnfjhGGcMpELoCGSo")
+model = genai.GenerativeModel('gemini-1.5-flash')
+@app.route('/', methods=['GET', 'POST'])
+def home():
+    return render_template('popup.html')
+def generate_ai_response(input_text):
+    try:
+        # Start a new chat session with the AI model
+        chat = model.start_chat(history=[])
+        response = chat.send_message(input_text + " \n Generate overview of text")
+        print("AI Response:", response.text)
+        return response.text
+    except Exception as e:
+        print("Error generating AI response:", str(e))
+        return "Error generating AI response."
+@app.route('/generate_summary', methods=['POST'])
+def generate_summary():
+    try:
+        data = request.json
+        html_content = data.get('html_content', '')
+        js_content = data.get('js_content', '')
+        # Remove HTML tags using BeautifulSoup
+        soup_html = BeautifulSoup(html_content, 'html.parser')
+        text_only_html = soup_html.get_text(separator=' ')
+        # Combine processed HTML and JS content for AI input
+        combined_text = f"{text_only_html} {js_content}"
+        print(combined_text)
+        # Generate AI response based on combined text
+        ai_response = generate_ai_response(combined_text)
+        return jsonify({"ai_response": ai_response})
+    except Exception as e:
+        return jsonify({"error": str(e)})
+if __name__ == "__main__":
+    app.run()

icons/OverviewIcon.jpeg ADDED Viewed

manifest.json ADDED Viewed

	@@ -0,0 +1,31 @@

+{
+  "manifest_version": 3,
+  "name": "Tab Overview AI",
+  "version": "1.0",
+  "homepage_url": "https://taboverviewai.onrender.com/",
+  "description": "AI-generated summaries of web pages to help users quickly grasp key points and save time.",
+  "permissions": [
+    "activeTab",
+    "tabs",
+    "storage",
+    "scripting"
+  ],
+  "host_permissions": [
+    "http://127.0.0.1:5000/",
+    "https://taboverviewai.onrender.com/"
+  ],
+  "icons": {
+    "128": "icons/OverviewIcon.jpeg"
+  },
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "128": "icons/OverviewIcon.jpeg"
+    }
+  },
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "{df7d4f48-efa2-4528-82df-992fb49f3303}"
+    }
+  }
+}

pop.css ADDED Viewed

	@@ -0,0 +1,10 @@

+body {
+    font-family: Arial, sans-serif;
+    width: 1000px;
+    padding: 10px;
+  }
+  button {
+    margin: 5px 0;
+  }

popup.html ADDED Viewed

	@@ -0,0 +1,308 @@

+<!DOCTYPE html>
+<html>
+<head>
+  <title>My Extension</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    body {
+      width: 350px;
+      height: 550px;
+      font-family: 'Poppins', sans-serif;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
+      margin: 0;
+      padding: 0;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      border-radius: 10px;
+    }
+    nav {
+      position: fixed;
+      top: 0;
+      width: 100%;
+      text-align: center;
+      background-color: #3571ff;
+      color: #ffffff;
+      font-size: 24px;
+      padding: 15px 0;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      z-index: 1000;
+    }
+    .cont {
+      margin-top: 60px;
+      margin-bottom: 60px;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      padding: 20px;
+      box-sizing: border-box;
+    }
+    .output {
+      font-size: 17px;
+      margin-top: 20px;
+      background: #ffffff;
+      padding: 15px;
+      border-radius: 5px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      width: 100%;
+      text-align: left;
+      margin-bottom: 40px;
+    }
+    #output p {
+      margin: 0;
+    }
+    .top {
+      justify-content: flex-start;
+      align-items: flex-start;
+      padding-top: 20px;
+    }
+    .bar-1 {
+      display: flex;
+      justify-content: space-between;
+      align-content: center;
+      align-items: center;
+      width: 100%;
+      margin-bottom: 20px;
+    }
+    .button {
+      padding: 20px 20px;
+      font-size: 18px;
+      font-weight: 700;
+      cursor: pointer;
+      border: none;
+      border-radius: 5px;
+      background-color: #4caf50;
+      color: #ffffff;
+      transition: background-color 0.3s ease-in-out, transform 0.3s;
+    }
+    .copybtn {
+      padding: 20px 20px;
+      font-size: 18px;
+      font-weight: 700;
+      cursor: pointer;
+      border: none;
+      border-radius: 45px;
+      background-color: #4caf50;
+      color: #ffffff;
+      transition: background-color 0.3s ease-in-out, transform 0.3s;
+    }
+    .button:hover, .copybtn:hover {
+      background-color: #45a049;
+      transform: translateY(-2px);
+    }
+    .button:active, .copybtn:active {
+      background-color: #3e8e41;
+      transform: translateY(0);
+    }
+    .copybtn[disabled] {
+      background-color: #ccc; /* Disabled button color */
+      cursor: not-allowed;
+    }
+    .copied-message {
+      position: fixed;
+      bottom: 50%;
+      left: 50%;
+      transform: translateX(-50%);
+      background-color: #626262;
+      color: white;
+      padding: 10px 20px;
+      border-radius: 5px;
+      font-size: 16px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+    .footer {
+      position: fixed;
+      bottom: 0;
+      width: 100%;
+      background-color: #333;
+      color: #fff;
+      text-align: center;
+      padding: 10px 0;
+    }
+    .modal {
+      display: none;
+      position: fixed;
+      z-index: 1000;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+    .modal-content {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: #fff;
+      padding: 20px;
+      border-radius: 10px;
+      text-align: center;
+      font-size: 20px;
+      color: #4caf50;
+    }
+    .signin-modal-content {
+      font-size: 20px;
+      color: #000;
+    }
+    .sidebar {
+      position: fixed;
+      width: 150px;
+      left: -150px;
+      height: 100%;
+      background-color: #ebf5ff;
+      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
+      transition: all 0.5s ease;
+      z-index: 1000;
+    }
+    .sidebar header {
+      font-size: 17px;
+      color: #DBE2EF;
+      line-height: 52px;
+      text-align: center;
+      background-color: #3571ff;
+      user-select: none;
+      font-weight: 700;
+    }
+    .sidebar a {
+      font-size: 15px;
+      display: block;
+      height: 60px;
+      width: 140px;
+      color: #000000;
+      line-height: 60px;
+      padding-left: 10px;
+      padding-bottom: 10px;
+      box-sizing: border-box;
+      border-left: 5px solid transparent;
+      text-decoration: none;
+      transition: all 0.3s ease;
+    }
+    .sidebar a:hover,
+    .sidebar a.active {
+      border-left: 5px solid #3571ff;
+      background-color: #8cadfa;
+      color: #fff;
+    }
+    .sidebar a i {
+      font-size: 17px;
+      margin-right: 10px;
+    }
+    .sidebar a span {
+      letter-spacing: 1px;
+      text-transform: uppercase;
+    }
+    #check {
+      display: none;
+      position: fixed;
+      top: 15px;
+      left: 15px;
+    }
+    label #btn,
+    label #cancel {
+      position: fixed;
+      left: 10px;
+      cursor: pointer;
+      color: #fff;
+      border-radius: 5px;
+      margin-bottom: 2px;
+      margin-left: 2px;
+      margin-right: 2px;
+      font-size: 20px;
+      background-color: #3571ff;
+      padding: 10px;
+      transition: all 0.5s ease;
+      z-index: 1100;
+    }
+    label #cancel {
+      opacity: 0;
+      visibility: hidden;
+    }
+    #check:checked ~ .sidebar {
+      left: 0;
+    }
+    #check:checked ~ label #btn {
+      opacity: 0;
+      visibility: hidden;
+    }
+    #check:checked ~ label #cancel {
+      opacity: 1;
+      visibility: visible;
+    }
+  </style>
+</head>
+<body>
+  <nav>
+    <input type="checkbox" id="check">
+    <label for="check">
+        <i class="fas fa-bars" id="btn" style="font-size: 15px;"></i>
+        <i class="fas fa-times" id="cancel" style="font-size: 15px;"></i>
+    </label>
+    <div class="sidebar">
+        <header>Menu</header>
+        <a href="mailto:peketinaveen87@gmail.com?subject=Feedback%20for%20TabOverviewAI&body=Dear%20TabOverviewAI%20team,%0D%0A%0D%0AI have some feedback...">
+          <i class="fas fa-heart" style="font-size: 15px;"></i><span>Feedback</span>
+        </a>
+    </div>
+    TabOverviewAI
+  </nav>
+  <div class="cont">
+    <div class="bar-1">
+      <button id="sendUrlButton" class="button">Get Summary</button>
+      <button id="copyButton" class="copybtn" disabled><i class="fa fa-copy" style="font-size:18px"></i></button>
+    </div>
+    <div id="output" class="output">Click 'Get Summary' to get overview of this site</div>
+  </div>
+  <div id="loadingModal" class="modal">
+    <div class="modal-content">
+      <i class="fa fa-spinner fa-spin"></i> Generating...
+    </div>
+  </div>
+  <div class="footer">
+     TabOverviewAI.
+  </div>
+  <script src="popup.js"></script>
+</body>
+</html>

popup.js ADDED Viewed

	@@ -0,0 +1,134 @@

+document.addEventListener('DOMContentLoaded', function() {
+    // Event listener to handle button click
+    var sendUrlButton = document.getElementById('sendUrlButton');
+    var loadingModal = document.getElementById('loadingModal');
+    var copyButton = document.getElementById('copyButton');
+    if (sendUrlButton) {
+        sendUrlButton.addEventListener('click', sendUrlContentToBackend);
+    } else {
+        console.error('Element with id "sendUrlButton" not found.');
+    }
+    // Event listener for copy button
+    if (copyButton) {
+        copyButton.addEventListener('click', copyToClipboard);
+    } else {
+        console.error('Element with id "copyButton" not found.');
+    }
+    // Function to send current tab content to backend server
+    function sendUrlContentToBackend() {
+        chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
+            var currentTab = tabs[0];
+            var currentTabUrl = currentTab.url;
+            chrome.scripting.executeScript({
+                target: { tabId: currentTab.id },
+                func: extractTextFromPage,
+                args: []
+            }, function(results) {
+                var content = results[0].result;
+                var requestData = {
+                    url: currentTabUrl,
+                    html_content: content.html,
+                    js_content: content.js
+                };
+                // Display loading indicator
+                loadingModal.style.display = 'block';
+                console.log('Sending data to server:', requestData);
+                // Send data to server using fetch API
+                fetch('https://taboverviewai.onrender.com/generate_summary', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(requestData)
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Network response was not ok');
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    console.log('Response from server:', data);
+                    var outputDiv = document.getElementById('output');
+                    outputDiv.innerHTML = formatResponseText(data.ai_response);
+                    document.getElementById("sendUrlButton").textContent = "ReGenerate";
+                    document.getElementById('copyButton').disabled = false;
+                    document.body.classList.add('top');
+                })
+                .catch(error => {
+                    console.error('Error sending URL content to server:', error);
+                })
+                .finally(() => {
+                    // Hide loading indicator
+                    loadingModal.style.display = 'none';
+                });
+            });
+        });
+    }
+    function extractTextFromPage() {
+        function extractText(node) {
+            let text = '';
+            if (node.nodeType === Node.TEXT_NODE) {
+                text += node.textContent.trim() + ' ';
+            } else if (node.nodeType === Node.ELEMENT_NODE) {
+                if (node.tagName === 'P' || node.tagName === 'SPAN' || node.tagName.match(/^H[1-6]$/)) {
+                    text += node.textContent.trim() + ' ';
+                }
+            }
+            return text;
+        }
+        var htmlContent = '';
+        var nodes = document.body.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6');
+        nodes.forEach(node => {
+            htmlContent += extractText(node);
+        });
+        var scriptContent = Array.from(document.getElementsByTagName('script')).map(s => extractText(s)).join(' ');
+        return { html: htmlContent, js: scriptContent };
+    }
+    // Function to format response text
+    function formatResponseText(text) {
+        text = text.replace(/\*\*(.*?)\*\*/g, '<br><b>$1</b>');
+        text = text.replace(/\*/g, '');
+        text = text.replace(/\*\*(.*?)\*\*/g, '<b>$1</b>');
+        return text;
+    }
+    // Copy to clipboard function
+    function copyToClipboard() {
+        var outputText = document.getElementById('output').textContent;
+        navigator.clipboard.writeText(outputText)
+        console.log("Showing copied message"); // Debugging line
+        var message = document.createElement('div');
+        message.className = 'copied-message';
+        message.textContent = 'Copied';
+        document.body.appendChild(message);
+        setTimeout(function() {
+            message.remove();
+        }, 2000);
+    }
+    // Event listener for signin link
+    var signinLink = document.getElementById('signinLink');
+    if (signinLink) {
+        signinLink.addEventListener('click', function(event) {
+            event.preventDefault();
+            document.getElementById('signinModal').style.display = 'block';
+        });
+    }
+    // Function to close the signin modal
+    function closeSigninModal() {
+        document.getElementById('signinModal').style.display = 'none';
+    }
+});

templates/popup.html ADDED Viewed

	@@ -0,0 +1,274 @@

+<!DOCTYPE html>
+<html>
+<head>
+  <title>My Extension</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    body {
+      width: 100%;
+      font-family: 'Poppins', sans-serif;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      background: linear-gradient(135deg, #f5f7fa, #ffffff);
+      margin: 0;
+      padding: 0;
+      border-radius: 10px;
+    }
+    nav {
+      width: 100%;
+      text-align: center;
+      background-color: #3571ff;
+      color: #ffffff;
+      font-size: 24px;
+      padding: 15px 0;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      z-index: 1000;
+      position: fixed;
+      top: 0;
+    }
+    .cont {
+      margin-top: 80px; /* Adjusted to give space for the fixed nav */
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      padding: 20px;
+      box-sizing: border-box;
+    }
+    .output {
+      font-size: 28px;
+      background: #ffffff;
+      padding: 15px;
+      border-radius: 5px;
+      width: 100%;
+      text-align: center;
+      margin-bottom: 40px;
+      margin-top: 20px;
+      height: 100%;
+      font-weight: 700;
+    }
+    #output p {
+      margin: 0;
+    }
+    .bar-1 {
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      margin-bottom: 20px;
+      text-align: center;
+    }
+    .button, .copybtn {
+      padding: 20px;
+      font-size: 18px;
+      font-weight: 700;
+      cursor: pointer;
+      border: none;
+      border-radius: 5px;
+      background-color: #4caf50;
+      color: #ffffff;
+      transition: background-color 0.3s ease-in-out, transform 0.3s;
+    }
+    .button:hover, .copybtn:hover {
+      background-color: #45a049;
+      transform: translateY(-2px);
+    }
+    .button:active, .copybtn:active {
+      background-color: #3e8e41;
+      transform: translateY(0);
+    }
+    .copybtn[disabled] {
+      background-color: #ccc;
+      cursor: not-allowed;
+    }
+    .copied-message {
+      width: 100px;
+      position: fixed;
+      bottom: 50%;
+      left: 50%;
+      transform: translateX(-50%);
+      background-color: #4caf50;
+      color: white;
+      padding: 10px 20px;
+      border-radius: 5px;
+      font-size: 16px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+    .footer {
+      width: 100%;
+      background-color: #333;
+      color: #fff;
+      text-align: center;
+      padding: 10px 0;
+      position: fixed;
+      bottom: 0;
+    }
+    .modal {
+      display: none;
+      position: fixed;
+      z-index: 1000;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+    .modal-content {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: #fff;
+      padding: 20px;
+      border-radius: 10px;
+      text-align: center;
+      font-size: 20px;
+      color: #4caf50;
+    }
+    .signin-modal-content {
+      font-size: 20px;
+      color: #000;
+    }
+    .sidebar {
+      position: fixed;
+      width: 150px;
+      left: -150px;
+      height: 100%;
+      background-color: #ebf5ff;
+      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
+      transition: all 0.5s ease;
+      z-index: 1000;
+    }
+    .sidebar header {
+      font-size: 17px;
+      color: #DBE2EF;
+      line-height: 52px;
+      text-align: center;
+      background-color: #3571ff;
+      user-select: none;
+      font-weight: 700;
+    }
+    .sidebar a {
+      font-size: 15px;
+      display: block;
+      height: 60px;
+      width: 140px;
+      color: #000000;
+      line-height: 60px;
+      padding-left: 10px;
+      padding-bottom: 10px;
+      box-sizing: border-box;
+      border-left: 5px solid transparent;
+      text-decoration: none;
+      transition: all 0.3s ease;
+    }
+    .sidebar a:hover, .sidebar a.active {
+      border-left: 5px solid #3571ff;
+      background-color: #8cadfa;
+      color: #fff;
+    }
+    .sidebar a i {
+      font-size: 17px;
+      margin-right: 10px;
+    }
+    .sidebar a span {
+      letter-spacing: 1px;
+      text-transform: uppercase;
+    }
+    #check {
+      display: none;
+      position: fixed;
+      top: 15px;
+      left: 15px;
+    }
+    label #btn, label #cancel {
+      position: fixed;
+      left: 10px;
+      cursor: pointer;
+      color: #fff;
+      border-radius: 5px;
+      margin-bottom: 2px;
+      margin-left: 2px;
+      margin-right: 2px;
+      font-size: 20px;
+      background-color: #3571ff;
+      padding: 10px;
+      transition: all 0.5s ease;
+      z-index: 1100;
+    }
+    label #cancel {
+      opacity: 0;
+      visibility: hidden;
+    }
+    #check:checked ~ .sidebar {
+      left: 0;
+    }
+    #check:checked ~ label #btn {
+      opacity: 0;
+      visibility: hidden;
+    }
+    #check:checked ~ label #cancel {
+      opacity: 1;
+      visibility: visible;
+    }
+  </style>
+</head>
+<body>
+  <nav>
+    <input type="checkbox" id="check">
+    <label for="check">
+        <i class="fas fa-times" id="cancel" style="font-size: 15px;"></i>
+    </label>
+    TabOverviewAI
+  </nav>
+  <div class="cont">
+    <div id="output" class="output">Unlocking the power of current tab summarization—transforming browsing experiences with seamless, AI-driven content distillation.</div>
+    <div class="bar-1">
+      <button id="sendUrlButton" class="button">Add Now</button>
+    </div>
+  </div>
+  <div class="footer">
+     TabOverviewAI.
+  </div>
+</body>
+</html>