Spaces:

pimenta-marcus
/

nexus-explorer-pro

Running

App Files Files Community

pimenta-marcus commited on Nov 26, 2025

Commit

178b685

verified ·

1 Parent(s): 2f8ac01

Avalie o código do site e o aprimore visualmente e funcionalmente

Browse files

Files changed (4) hide show

README.md +7 -4
components/footer.js +63 -0
components/navbar.js +98 -0
index.html +501 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Nexus Explorer Pro
-emoji: 👀
-colorFrom: gray
 colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: 🧠 Nexus Explorer Pro 🚀
+colorFrom: green
 colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js ADDED Viewed

	@@ -0,0 +1,63 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - Nexus Explorer Pro</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body>
+    <custom-navbar></custom-navbar>
+    <main class="max-w-4xl mx-auto px-4 py-12">
+        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8">
+            <h1 class="text-4xl font-bold text-center mb-8 text-gray-900 dark:text-white">
+                About Nexus Explorer Pro
+            </h1>
+            <div class="prose prose-lg dark:prose-invert max-w-none">
+                <p class="text-xl text-gray-600 dark:text-gray-300 mb-6">
+                    Welcome to the future of knowledge exploration! Nexus Explorer Pro is an intelligent
+                    visual learning platform that transforms complex topics into interactive knowledge graphs.
+                </p>
+                <div class="grid md:grid-cols-2 gap-8 my-12">
+                    <div class="bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-900/20 dark:to-indigo-900/20 p-6 rounded-xl">
+                        <h3 class="text-xl font-semibold mb-3 text-blue-900 dark:text-blue-200">🎯 How it Works</h3>
+                        <p class="text-gray-700 dark:text-gray-300">
+                            Simply enter any topic and watch as our AI-powered engine creates a beautiful
+                            network of interconnected concepts, facts, and ideas.
+                        </p>
+                    </div>
+                    <div class="bg-gradient-to-br from-purple-50 to-pink-100 dark:from-purple-900/20 dark:to-pink-900/20 p-6 rounded-xl">
+                        <h3 class="text-xl font-semibold mb-3 text-purple-900 dark:text-purple-200">🚀 Key Features</h3>
+                        <ul class="text-gray-700 dark:text-gray-300 space-y-2">
+                            <li>• Interactive knowledge graphs</li>
+                            <li>• AI-powered concept discovery</li>
+                            <li>• Real-time graph expansion</li>
+                            <li>• Data persistence across sessions</li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="bg-gradient-to-r from-green-400 to-blue-500 text-white p-8 rounded-2xl text-center">
+                    <h2 class="text-2xl font-bold mb-4">Ready to Explore?</h2>
+                    <p class="mb-6">Start building your knowledge network today!</p>
+                    <a href="/" class="inline-block bg-white text-gray-900 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
+                        Launch Explorer →
+                    </a>
+                </div>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>

components/navbar.js ADDED Viewed

	@@ -0,0 +1,98 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          --nav-bg: light-dark(#ffffff, #2d2e30);
+          --nav-border: light-dark(#dadce0, #5f6368);
+          --nav-text: light-dark(#202124, #e8eaed);
+          --nav-hover: light-dark(#f8f9fa, #3c4043);
+          --primary: light-dark(#1a73e8, #8ab4f8);
+        }
+        nav {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 1rem 2rem;
+          background: var(--nav-bg);
+          border-bottom: 1px solid var(--nav-border);
+          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        }
+        .brand {
+          font-family: 'Google Sans', sans-serif;
+          font-size: 1.5rem;
+          font-weight: 700;
+          color: var(--primary);
+          text-decoration: none;
+        }
+        .nav-links {
+          display: flex;
+          gap: 2rem;
+          align-items: center;
+        }
+        a {
+          color: var(--nav-text);
+          text-decoration: none;
+          font-weight: 500;
+          padding: 0.5rem 1rem;
+          border-radius: 6px;
+          transition: all 0.2s;
+        }
+        a:hover {
+          background: var(--nav-hover);
+          color: var(--primary);
+        }
+        .theme-toggle {
+          background: none;
+          border: none;
+          cursor: pointer;
+          padding: 0.5rem;
+          border-radius: 6px;
+          transition: background 0.2s;
+        }
+        .theme-toggle:hover {
+          background: var(--nav-hover);
+        }
+        .theme-toggle svg {
+          width: 20px;
+          height: 20px;
+          fill: var(--nav-text);
+        }
+      </style>
+      <nav>
+        <a href="/" class="brand">🧠 Nexus</a>
+        <div class="nav-links">
+          <a href="/">Home</a>
+          <a href="/about.html">About</a>
+          <a href="/gallery.html">Gallery</a>
+          <button class="theme-toggle" id="themeToggle" title="Toggle theme">
+            <svg viewBox="0 0 24 24">
+              <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"/>
+            </svg>
+          </button>
+        </div>
+      </nav>
+    `;
+    // Theme toggle functionality
+    const themeToggle = this.shadowRoot.getElementById('themeToggle');
+    themeToggle.addEventListener('click', () => {
+      const html = document.documentElement;
+      const current = html.getAttribute('data-theme') || 'auto';
+      const next = current === 'auto' ? 'dark' : current === 'dark' ? 'light' : 'auto';
+      html.setAttribute('data-theme', next);
+      localStorage.setItem('theme-preference', next);
+    });
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,502 @@
-<!doctype html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
 <html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Explorador de Conhecimentos</title>
+  <script type="importmap">
+  {
+    "imports": {
+      "@google/genai": "https://esm.sh/@google/genai@^0.7.0",
+      "vis-network/standalone": "https://esm.sh/vis-network@9.1.9/standalone/esm/vis-network.min.js"
+    }
+  }
+  </script>
+  <!-- Add Google Fonts Link -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@400;500&display=swap"
+    rel="stylesheet">
+  <style>
+    :root {
+      --light-bg: #f8f9fa;
+      --dark-bg: #202124;
+      --light-surface: #ffffff;
+      --dark-surface: #2d2e30;
+      --light-text-primary: #202124;
+      --dark-text-primary: #e8eaed;
+      --light-text-secondary: #5f6368;
+      --dark-text-secondary: #bdc1c6;
+      --light-primary: #1a73e8;
+      --dark-primary: #8ab4f8;
+      --light-primary-hover: #185abc;
+      --dark-primary-hover: #aecbfa;
+      --light-border: #dadce0;
+      --dark-border: #5f6368;
+      --light-error: #d93025;
+      --dark-error: #f28b82;
+      --delete-red: #d93025;
+    }
+    body {
+      font-family: 'Google Sans', Roboto, Arial, sans-serif;
+      margin: 0;
+      background-color: light-dark(var(--light-bg), var(--dark-bg));
+      color: light-dark(var(--light-text-primary), var(--dark-text-primary));
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      overflow: hidden;
+    }
+    .main-layout {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      padding: 20px;
+      box-sizing: border-box;
+      gap: 20px;
+    }
+    .controls-container {
+      background-color: light-dark(var(--light-surface), var(--dark-surface));
+      padding: 20px 30px;
+      border-radius: 12px;
+      box-shadow: 0 1px 3px light-dark(rgba(60, 64, 67, 0.15), rgba(0, 0, 0, 0.3));
+      flex-shrink: 0;
+    }
+    h1 {
+      margin: 0 0 10px 0;
+      color: light-dark(var(--light-primary), var(--dark-primary));
+      font-size: 1.8em;
+    }
+    p {
+      margin: 0 0 20px 0;
+      color: light-dark(var(--light-text-secondary), var(--dark-text-secondary));
+    }
+    .input-group {
+      display: flex;
+      gap: 15px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+    input[type="text"] {
+      flex-grow: 1;
+      padding: 12px 15px;
+      border: 1px solid light-dark(var(--light-border), var(--dark-border));
+      border-radius: 8px;
+      font-size: 16px;
+      background-color: light-dark(var(--light-bg), var(--dark-surface));
+      color: light-dark(var(--light-text-primary), var(--dark-text-primary));
+      min-width: 250px;
+    }
+    input[type="text"]:focus {
+      outline: none;
+      border-color: light-dark(var(--light-primary), var(--dark-primary));
+      box-shadow: 0 0 0 2px light-dark(rgba(26, 115, 232, 0.2), rgba(138, 180, 248, 0.3));
+    }
+    button {
+      background-color: light-dark(var(--light-primary), var(--dark-primary));
+      color: #fff;
+      padding: 12px 24px;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 15px;
+      font-weight: 500;
+      transition: opacity 0.2s;
+      white-space: nowrap;
+    }
+    @media (prefers-color-scheme: dark) {
+      button {
+        color: var(--dark-bg);
+      }
+    }
+    button:hover {
+      opacity: 0.9;
+    }
+    button:disabled {
+      background-color: light-dark(#e0e0e0, #3c4043);
+      color: light-dark(#a0a0a0, #7f8184);
+      cursor: not-allowed;
+    }
+    button.secondary-button {
+      background-color: transparent;
+      border: 1px solid light-dark(var(--light-border), var(--dark-border));
+      color: light-dark(var(--light-text-primary), var(--dark-text-primary));
+    }
+    button.secondary-button:hover {
+      background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
+    }
+    .status-message {
+      margin-top: 10px;
+      min-height: 20px;
+      font-size: 14px;
+      color: light-dark(var(--light-text-secondary), var(--dark-text-secondary));
+      font-style: italic;
+    }
+    .network-container {
+      flex-grow: 1;
+      background-color: light-dark(var(--light-surface), var(--dark-surface));
+      border-radius: 12px;
+      border: 1px solid light-dark(var(--light-border), var(--dark-border));
+      box-shadow: 0 1px 3px light-dark(rgba(60, 64, 67, 0.15), rgba(0, 0, 0, 0.3));
+      position: relative;
+      overflow: hidden;
+    }
+    div.vis-tooltip {
+      background-color: light-dark(var(--light-surface), var(--dark-surface));
+      color: light-dark(var(--light-text-primary), var(--dark-text-primary));
+      border: 1px solid light-dark(var(--light-border), var(--dark-border));
+      border-radius: 6px;
+      padding: 10px;
+      font-family: 'Google Sans', sans-serif;
+      font-size: 14px;
+      max-width: 300px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      z-index: 100;
+      white-space: normal;
+      word-wrap: break-word;
+    }
+  </style>
+</head>
+<body>
+  <div class="main-layout">
+    <div class="controls-container">
+      <h1>Explorador de Conhecimentos</h1>
+      <div class="input-group">
+        <input type="password" id="apiKeyInput" placeholder="Insira sua API Key">
+        <input type="text" id="topicInput" placeholder="Insira um tópico (ex: Física Quântica)">
+        <button id="generateButton">Iniciar Exploração</button>
+        <button id="resetButton" class="secondary-button">Limpar Gráfico</button>
+      </div>
+      <div id="statusMessage" class="status-message"></div>
+    </div>
+    <div id="network" class="network-container"></div>
+  </div>
+  <script type="module">
+    import { GoogleGenAI } from '@google/genai';
+    import { Network, DataSet } from 'vis-network/standalone';
+    // --- DOM Elements ---
+    const topicInput = document.getElementById('topicInput');
+    const apiKeyInput = document.getElementById('apiKeyInput');
+    const generateButton = document.getElementById('generateButton');
+    const resetButton = document.getElementById('resetButton');
+    const networkContainer = document.getElementById('network');
+    const statusMessage = document.getElementById('statusMessage');
+    // --- Initialization ---
+    let ai = null;
+    let network = null;
+    let nodes = new DataSet([]);
+    let edges = new DataSet([]);
+    const LOCAL_STORAGE_KEY = 'gemini_knowledge_graph_v1';
+    const API_KEY_STORAGE_KEY = 'gemini_api_key';
+    // Initialize network options
+    const options = {
+      nodes: {
+        shape: 'dot',
+        size: 25,
+        font: {
+          size: 16,
+          face: 'Google Sans',
+        },
+        borderWidth: 2,
+        shadow: true,
+      },
+      edges: {
+        width: 2,
+        color: { inherit: 'from' },
+        smooth: {
+          type: 'continuous',
+        },
+      },
+      physics: {
+        stabilization: false,
+        barnesHut: {
+          gravitationalConstant: -8000,
+          springConstant: 0.04,
+          springLength: 95,
+        },
+      },
+      interaction: {
+        hover: true,
+        tooltipDelay: 200,
+      },
+    };
+    // --- Logic ---
+    function initNetwork() {
+      const data = {
+        nodes: nodes,
+        edges: edges,
+      };
+      network = new Network(networkContainer, data, options);
+      // Event Listener: Click on Node
+      network.on('click', async (params) => {
+        if (params.nodes.length > 0) {
+          const nodeId = params.nodes[0];
+          const clickedNode = nodes.get(nodeId);
+          await expandNode(clickedNode);
+        }
+      });
+      // Handle Resize
+      window.addEventListener('resize', () => {
+        if (network) network.fit();
+      });
+    }
+    function saveGraph() {
+      const data = {
+        nodes: nodes.get(),
+        edges: edges.get(),
+      };
+      localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(data));
+    }
+    function loadGraph() {
+      const saved = localStorage.getItem(LOCAL_STORAGE_KEY);
+      if (saved) {
+        try {
+          const parsed = JSON.parse(saved);
+          nodes.clear();
+          edges.clear();
+          nodes.add(parsed.nodes);
+          edges.add(parsed.edges);
+          // If network doesn't exist yet, init it
+          if (!network) {
+            initNetwork();
+          } else {
+            network.fit();
+          }
+          return true;
+        } catch (e) {
+          console.error('Failed to parse saved graph', e);
+          return false;
+        }
+      }
+      return false;
+    }
+    // Generate Prompt Helper
+    async function fetchRelatedConcepts(topic) {
+      if (!ai) {
+        throw new Error('API Key not set. Please enter your Gemini API Key.');
+      }
+      const systemInstruction = `You are a knowledge graph generator.
+      Your task is to identify key sub-concepts, facts, or related entities for a given topic.
+      Return the output strictly as a JSON array of objects.
+      Each object must have a "label" (short name, max 3-4 words) and a "description" (2-3 concise sentences explaining the connection to the topic).
+      Do not include Markdown formatting or code blocks. Just the raw JSON.
+      Generate between 5 and 7 items.`;
+      const prompt = `Topic: "${topic}"`;
+      try {
+        const response = await ai.models.generateContent({
+          model: 'gemini-2.5-flash',
+          contents: prompt,
+          config: {
+            responseMimeType: 'application/json',
+            systemInstruction: systemInstruction,
+          },
+        });
+        const text = response.text || '[]';
+        // Basic cleanup in case model adds markdown despite instructions
+        const jsonStr = text.replace(/```json/g, '').replace(/```/g, '').trim();
+        return JSON.parse(jsonStr);
+      } catch (error) {
+        console.error('API Error:', error);
+        throw new Error('Falha ao buscar conceitos do Gemini.');
+      }
+    }
+    // Initial Graph Generation
+    async function startNewGraph() {
+      const topic = topicInput.value.trim();
+      const apiKey = apiKeyInput.value.trim();
+      if (!apiKey) {
+        statusMessage.textContent = 'Insira sua API Key.';
+        return;
+      }
+      if (!topic) {
+        statusMessage.textContent = 'Insira um tópico.';
+        return;
+      }
+      // Save API Key
+      localStorage.setItem(API_KEY_STORAGE_KEY, apiKey);
+      // Initialize AI with the provided key
+      ai = new GoogleGenAI({ apiKey: apiKey });
+      statusMessage.textContent = 'Gerando gráfico de conhecimentos...';
+      generateButton.disabled = true;
+      try {
+        // Clear current data
+        nodes.clear();
+        edges.clear();
+        localStorage.removeItem(LOCAL_STORAGE_KEY);
+        // Create Root Node
+        const rootId = crypto.randomUUID();
+        nodes.add({
+          id: rootId,
+          label: topic,
+          title: `Root Topic: ${topic}`,
+          color: { background: '#1a73e8', border: '#0d47a1' },
+          font: { color: '#ffffff' },
+          size: 40,
+        });
+        if (!network) initNetwork();
+        // Fetch children
+        const concepts = await fetchRelatedConcepts(topic);
+        // Add children
+        const newNodes = [];
+        const newEdges = [];
+        concepts.forEach((c) => {
+          const id = crypto.randomUUID();
+          newNodes.push({
+            id: id,
+            label: c.label,
+            title: c.description,
+            color: { background: '#e8f0fe', border: '#1a73e8' }, // Light blue
+          });
+          newEdges.push({ from: rootId, to: id });
+        });
+        nodes.add(newNodes);
+        edges.add(newEdges);
+        saveGraph();
+        statusMessage.textContent = 'Gráfico gerado! Clique nos nós para expandir.';
+      } catch (err) {
+        statusMessage.textContent = 'Erro ao gerar gráfico. Tente novamente.';
+      } finally {
+        generateButton.disabled = false;
+      }
+    }
+    // Expand existing node
+    async function expandNode(parentNode) {
+      if (statusMessage.textContent?.includes('Expandindo')) return;
+      const topic = parentNode.label;
+      statusMessage.textContent = `Expandindo "${topic}"...`;
+      networkContainer.style.cursor = 'aguarde';
+      try {
+        const concepts = await fetchRelatedConcepts(topic);
+        const newNodes = [];
+        const newEdges = [];
+        // Get existing connected nodes to avoid direct duplicates on this specific branch
+        const connectedNodeIds = network.getConnectedNodes(parentNode.id);
+        const existingLabels = new Set(connectedNodeIds.map((id) => nodes.get(id).label.toLowerCase()));
+        let addedCount = 0;
+        concepts.forEach((c) => {
+          if (existingLabels.has(c.label.toLowerCase())) return;
+          const id = crypto.randomUUID();
+          newNodes.push({
+            id: id,
+            label: c.label,
+            title: c.description,
+            color: { background: '#fce8e6', border: '#c5221f' }, // Light red/pinkish for sub-branches
+          });
+          newEdges.push({ from: parentNode.id, to: id });
+          addedCount++;
+        });
+        if (addedCount === 0) {
+          statusMessage.textContent = `Nenhum novo conceito distinto encontrado para "${topic}".`;
+        } else {
+          nodes.add(newNodes);
+          edges.add(newEdges);
+          saveGraph();
+          statusMessage.textContent = `Adicionado ${addedCount} novos conceitos conectados a "${topic}".`;
+        }
+      } catch (err) {
+        console.error(err);
+        statusMessage.textContent = `Error expanding "${topic}".`;
+      } finally {
+        networkContainer.style.cursor = 'default';
+      }
+    }
+    // --- Event Handlers ---
+    generateButton.addEventListener('click', startNewGraph);
+    resetButton.addEventListener('click', () => {
+      nodes.clear();
+      edges.clear();
+      localStorage.removeItem(LOCAL_STORAGE_KEY);
+      topicInput.value = '';
+      statusMessage.textContent = 'Graph cleared.';
+    });
+    topicInput.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        startNewGraph();
+      }
+    });
+    // Load on startup
+    const savedKey = localStorage.getItem(API_KEY_STORAGE_KEY);
+    if (savedKey) {
+      apiKeyInput.value = savedKey;
+    }
+    if (loadGraph()) {
+      statusMessage.textContent = 'Restaurado sessão anterior.';
+      // Re-init AI if we have a key, so expansion works immediately
+      if (savedKey) {
+        ai = new GoogleGenAI({ apiKey: savedKey });
+      }
+    } else {
+      initNetwork();
+    }
+  </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>