Spaces:

Germinal
/

anycoder-8a0064cd

Build error

App Files Files Community

Germinal commited on Dec 12, 2025

Commit

f7b8e4c

verified ·

1 Parent(s): f34ac80

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +524 -332

index.html CHANGED Viewed

@@ -3,400 +3,592 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Pesquisa Forense de Pessoas</title>
   <script src="https://cdn.tailwindcss.com"></script>
-  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
-  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
-  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
     body {
       font-family: 'Inter', sans-serif;
     }
-    .loading-spinner {
-      border: 4px solid rgba(255, 255, 255, 0.1);
       border-radius: 50%;
-      border-top: 4px solid #3b82f6;
       width: 40px;
       height: 40px;
       animation: spin 1s linear infinite;
     }
     @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
     }
-    .card-hover {
-      transition: all 0.3s ease;
     }
-    .card-hover:hover {
-      transform: translateY(-5px);
-      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
     }
   </style>
 </head>
-<body class="bg-slate-900 text-slate-200 min-h-screen p-4 font-sans">
-  <div id="root"></div>
-  <script type="text/babel">
-    const PLUGIN_ID = "forensic-person-search-v1";
-    let authToken = null;
-    // Componentes React
-    const AuthStatus = () => {
-      const [status, setStatus] = React.useState("Aguardando Autenticação...");
-      const [isAuthenticated, setIsAuthenticated] = React.useState(false);
-      React.useEffect(() => {
-        window.addEventListener('message', (event) => {
-          if (event.data.type === 'AUTH_TOKEN') {
-            authToken = event.data.token;
-            setStatus("Conectado e Autenticado ✅");
-            setIsAuthenticated(true);
-          }
-        });
-      }, []);
-      return (
-        <div className="flex justify-between items-center mb-6">
-          <div className="flex items-center space-x-2">
-            <div className="w-3 h-3 rounded-full bg-blue-500 animate-pulse"></div>
-            <span className="text-xs text-slate-400">{status}</span>
-          </div>
-          <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer" className="text-xs text-blue-400 hover:text-blue-300 transition-colors">
-            Built with anycoder
-          </a>
         </div>
-      );
-    };
-    const SearchForm = ({ onSearch, isLoading }) => {
-      const [cpf, setCpf] = React.useState("");
-      const [socialProfile, setSocialProfile] = React.useState("");
-      const [years, setYears] = React.useState(5);
-      const handleSubmit = (e) => {
-        e.preventDefault();
-        onSearch({ cpf, socialProfile, years });
-      };
-      return (
-        <form onSubmit={handleSubmit} className="bg-slate-800 p-6 rounded-lg shadow-lg mb-8">
-          <h2 className="text-xl font-semibold mb-6 text-white">Pesquisa Forense</h2>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-            <div>
-              <label className="block text-sm font-medium text-slate-300 mb-1">CPF</label>
-              <input
-                type="text"
-                value={cpf}
-                onChange={(e) => setCpf(e.target.value)}
-                placeholder="000.000.000-00"
-                className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-                required
-              />
             </div>
-            <div>
-              <label className="block text-sm font-medium text-slate-300 mb-1">Perfil Social</label>
-              <input
-                type="url"
-                value={socialProfile}
-                onChange={(e) => setSocialProfile(e.target.value)}
-                placeholder="https://rede-social.com/perfil"
-                className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-                required
-              />
             </div>
-            <div>
-              <label className="block text-sm font-medium text-slate-300 mb-1">Anos de História</label>
-              <select
-                value={years}
-                onChange={(e) => setYears(parseInt(e.target.value))}
-                className="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-              >
-                {[1, 2, 3, 4, 5].map((year) => (
-                  <option key={year} value={year}>{year} ano{year > 1 ? 's' : ''}</option>
-                ))}
-              </select>
             </div>
           </div>
-          <button
-            type="submit"
-            disabled={isLoading}
-            className={`w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-md transition-colors flex items-center justify-center ${isLoading ? 'opacity-70 cursor-not-allowed' : ''}`}
-          >
-            {isLoading ? (
-              <>
-                <div className="loading-spinner mr-2"></div>
-                Processando...
-              </>
-            ) : (
-              'Iniciar Pesquisa Forense'
-            )}
-          </button>
-        </form>
-      );
-    };
-    const ResultsDashboard = ({ results, error }) => {
-      if (error) {
-        return (
-          <div className="bg-red-900/20 border border-red-500 p-4 rounded-lg text-red-300">
-            <h3 className="font-semibold mb-2">Erro na Pesquisa</h3>
-            <p>{error}</p>
           </div>
-        );
-      }
-      if (!results) {
-        return (
-          <div className="text-center py-12">
-            <p className="text-slate-400">Insira os dados e clique em "Iniciar Pesquisa Forense" para começar</p>
           </div>
-        );
-      }
-      return (
-        <div className="space-y-6">
-          {/* Header com informações básicas */}
-          <div className="bg-slate-800 p-6 rounded-lg shadow-lg">
-            <div className="flex flex-col md:flex-row justify-between items-start md:items-center">
               <div>
-                <h2 className="text-2xl font-bold text-white mb-2">{results.personalInfo.name || "Desconhecido"}</h2>
-                <p className="text-slate-300">CPF: {results.personalInfo.cpf || "Não fornecido"}</p>
-                <p className="text-slate-400 text-sm">Perfil analisado: {results.socialProfile}</p>
               </div>
-              <div className="mt-4 md:mt-0">
-                <span className={`px-3 py-1 rounded-full text-xs font-medium ${results.riskLevel === 'ALTO' ? 'bg-red-500' : results.riskLevel === 'MÉDIO' ? 'bg-yellow-500' : 'bg-green-500'}`}>
-                  Nível de Risco: {results.riskLevel || "Não avaliado"}
-                </span>
               </div>
             </div>
           </div>
-          {/* Cards de informações */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {/* Card de Atividade */}
-            <div className="bg-slate-800 p-6 rounded-lg shadow-lg card-hover">
-              <h3 className="text-lg font-semibold text-white mb-4 flex items-center">
-                <svg className="w-5 h-5 mr-2 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-                </svg>
-                Atividade Recente
-              </h3>
-              <div className="space-y-3">
-                <div className="flex justify-between text-sm">
-                  <span className="text-slate-400">Posts nos últimos {results.years} anos</span>
-                  <span className="font-medium text-white">{results.activity.postCount || 0}</span>
-                </div>
-                <div className="flex justify-between text-sm">
-                  <span className="text-slate-400">Comentários</span>
-                  <span className="font-medium text-white">{results.activity.commentCount || 0}</span>
-                </div>
-                <div className="flex justify-between text-sm">
-                  <span className="text-slate-400">Curtidas</span>
-                  <span className="font-medium text-white">{results.activity.likeCount || 0}</span>
                 </div>
               </div>
             </div>
-            {/* Card de Análise de Sentimento */}
-            <div className="bg-slate-800 p-6 rounded-lg shadow-lg card-hover">
-              <h3 className="text-lg font-semibold text-white mb-4 flex items-center">
-                <svg className="w-5 h-5 mr-2 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-                Análise de Sentimento
-              </h3>
-              <div className="space-y-3">
-                <div className="flex items-center justify-between">
-                  <span className="text-slate-400 text-sm">Positivo</span>
-                  <div className="w-2/3 bg-slate-700 rounded-full h-2.5">
-                    <div className="bg-green-500 h-2.5 rounded-full" style={{ width: `${results.sentiment.positive || 0}%` }}></div>
-                  </div>
-                  <span className="text-white text-sm ml-2">{results.sentiment.positive || 0}%</span>
-                </div>
-                <div className="flex items-center justify-between">
-                  <span className="text-slate-400 text-sm">Neutro</span>
-                  <div className="w-2/3 bg-slate-700 rounded-full h-2.5">
-                    <div className="bg-blue-500 h-2.5 rounded-full" style={{ width: `${results.sentiment.neutral || 0}%` }}></div>
                   </div>
-                  <span className="text-white text-sm ml-2">{results.sentiment.neutral || 0}%</span>
-                </div>
-                <div className="flex items-center justify-between">
-                  <span className="text-slate-400 text-sm">Negativo</span>
-                  <div className="w-2/3 bg-slate-700 rounded-full h-2.5">
-                    <div className="bg-red-500 h-2.5 rounded-full" style={{ width: `${results.sentiment.negative || 0}%` }}></div>
                   </div>
-                  <span className="text-white text-sm ml-2">{results.sentiment.negative || 0}%</span>
                 </div>
               </div>
             </div>
-            {/* Card de Conexões */}
-            <div className="bg-slate-800 p-6 rounded-lg shadow-lg card-hover">
-              <h3 className="text-lg font-semibold text-white mb-4 flex items-center">
-                <svg className="w-5 h-5 mr-2 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-                </svg>
-                Conexões
-              </h3>
-              <div className="space-y-3">
-                <div className="flex justify-between text-sm">
-                  <span className="text-slate-400">Amigos/Seguidores</span>
-                  <span className="font-medium text-white">{results.connections.friends || 0}</span>
-                </div>
-                <div className="flex justify-between text-sm">
-                  <span className="text-slate-400">Grupos</span>
-                  <span className="font-medium text-white">{results.connections.groups || 0}</span>
-                </div>
-                <div className="flex justify-between text-sm">
-                  <span className="text-slate-400">Páginas Seguidas</span>
-                  <span className="font-medium text-white">{results.connections.pages || 0}</span>
                 </div>
               </div>
             </div>
-          </div>
-          {/* Tabela de Posts Importantes */}
-          <div className="bg-slate-800 p-6 rounded-lg shadow-lg">
-            <h3 className="text-lg font-semibold text-white mb-4 flex items-center">
-              <svg className="w-5 h-5 mr-2 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3h3m-3 4h3m-3 4h3m-3 4h3" />
-              </svg>
-              Posts Importantes (Últimos {results.years} anos)
-            </h3>
-            <div className="overflow-x-auto">
-              <table className="w-full text-sm">
-                <thead className="text-slate-400 border-b border-slate-700">
-                  <tr>
-                    <th className="px-4 py-2 text-left">Data</th>
-                    <th className="px-4 py-2 text-left">Conteúdo</th>
-                    <th className="px-4 py-2 text-left">Sentimento</th>
-                    <th className="px-4 py-2 text-left">Engajamento</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {results.importantPosts && results.importantPosts.length > 0 ? (
-                    results.importantPosts.map((post, index) => (
-                      <tr key={index} className="border-b border-slate-700 hover:bg-slate-700/50 transition-colors">
-                        <td className="px-4 py-3 text-slate-300">{new Date(post.date).toLocaleDateString()}</td>
-                        <td className="px-4 py-3 text-white max-w-xs truncate">{post.content}</td>
-                        <td className="px-4 py-3">
-                          <span className={`px-2 py-1 rounded-full text-xs font-medium ${post.sentiment === 'POSITIVO' ? 'bg-green-500' : post.sentiment === 'NEGATIVO' ? 'bg-red-500' : 'bg-blue-500'}`}>
-                            {post.sentiment}
-                          </span>
-                        </td>
-                        <td className="px-4 py-3 text-white">{post.engagement}</td>
-                      </tr>
-                    ))
-                  ) : (
-                    <tr>
-                      <td colSpan="4" className="px-4 py-6 text-center text-slate-400">Nenhum post importante encontrado</td>
-                    </tr>
-                  )}
-                </tbody>
-              </table>
             </div>
           </div>
-          {/* Resumo da IA */}
-          <div className="bg-slate-800 p-6 rounded-lg shadow-lg">
-            <h3 className="text-lg font-semibold text-white mb-4 flex items-center">
-              <svg className="w-5 h-5 mr-2 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
-              </svg>
-              Resumo da Análise Forense (IA Gemini)
-            </h3>
-            <div className="prose prose-invert max-w-none text-slate-300">
-              <p className="whitespace-pre-wrap">{results.aiSummary || "Nenhum resumo disponível. A análise da IA Gemini não retornou resultados."}</p>
-            </div>
           </div>
         </div>
-      );
-    };
-    const App = () => {
-      const [results, setResults] = React.useState(null);
-      const [error, setError] = React.useState(null);
-      const [isLoading, setIsLoading] = React.useState(false);
-      const [isAuthenticated, setIsAuthenticated] = React.useState(false);
-      React.useEffect(() => {
-        window.addEventListener('message', (event) => {
-          if (event.data.type === 'AUTH_TOKEN') {
-            authToken = event.data.token;
-            setIsAuthenticated(true);
-          }
         });
-      }, []);
-      const handleSearch = async ({ cpf, socialProfile, years }) => {
-        if (!authToken) {
-          setError("Token de autenticação não disponível. Por favor, recarregue a página.");
-          return;
         }
-        setIsLoading(true);
-        setError(null);
-        setResults(null);
-        try {
-          const response = await fetch('/api/client/plugin/ai', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-              'Authorization': `Bearer ${authToken}`
-            },
-            body: JSON.stringify({
-              plugin_id: PLUGIN_ID,
-              user_prompt: `Realize uma pesquisa forense detalhada da pessoa com CPF ${cpf} e perfil social ${socialProfile}. Analise os últimos ${years} anos de atividade. Estruture os dados nos seguintes campos:
-              1. personalInfo: {name, cpf, age, location}
-              2. activity: {postCount, commentCount, likeCount}
-              3. sentiment: {positive, neutral, negative} (percentages)
-              4. connections: {friends, groups, pages}
-              5. importantPosts: [ {date, content, sentiment, engagement} ] (max 10)
-              6. riskLevel: "BAIXO", "MÉDIO" ou "ALTO"
-              7. aiSummary: resumo profissional em português (máx 500 palavras) com insights forenses
-              Use a API do Gemini para estruturar e analisar as informações. Inclua qualquer comportamento suspeito, padrões de atividade e potenciais riscos identificados.`
-            })
-          });
-          if (!response.ok) {
-            throw new Error(`Erro na API: ${response.status} ${response.statusText}`);
-          }
-          const data = await response.json();
-          setResults({
-            ...data,
-            cpf,
-            socialProfile,
-            years
-          });
-        } catch (err) {
-          console.error("Erro na pesquisa:", err);
-          setError(err.message || "Falha ao processar a pesquisa forense. Tente novamente.");
-        } finally {
-          setIsLoading(false);
-        }
       };
-      return (
-        <div className="max-w-7xl mx-auto">
-          <AuthStatus />
-          <SearchForm onSearch={handleSearch} isLoading={isLoading} />
-          <ResultsDashboard results={results} error={error} />
-        </div>
-      );
-    };
-    // Renderizar o aplicativo React
-    ReactDOM.createRoot(document.getElementById('root')).render(<App />);
   </script>
 </body>
 </html>

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Forensic Person Search System</title>
   <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
     body {
       font-family: 'Inter', sans-serif;
+      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
     }
+    .card-glow {
+      box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
+      transition: all 0.3s ease;
+    }
+    .card-glow:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
+    }
+    .gradient-border {
+      background: linear-gradient(45deg, #3b82f6, #8b5cf6);
+      padding: 1px;
+      border-radius: 0.75rem;
+    }
+    .gradient-border-content {
+      background: #0f172a;
+      border-radius: 0.625rem;
+    }
+    .timeline-item::before {
+      content: '';
+      position: absolute;
+      left: 10px;
+      top: 0;
+      bottom: 0;
+      width: 2px;
+      background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
+    }
+    .timeline-dot {
+      width: 20px;
+      height: 20px;
       border-radius: 50%;
+      background: linear-gradient(45deg, #3b82f6, #8b5cf6);
+      position: absolute;
+      left: 5px;
+    }
+    .loading-spinner {
       width: 40px;
       height: 40px;
+      border: 4px solid rgba(59, 130, 246, 0.2);
+      border-top-color: #3b82f6;
+      border-radius: 50%;
       animation: spin 1s linear infinite;
     }
     @keyframes spin {
+      to { transform: rotate(360deg); }
     }
+    .network-graph {
+      background: radial-gradient(circle at center, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
     }
+    .risk-meter {
+      background: linear-gradient(to right, #ef4444, #f59e0b, #10b981);
     }
   </style>
 </head>
+<body class="min-h-screen p-4 md:p-6">
+  <div class="max-w-7xl mx-auto">
+    <!-- Header -->
+    <header class="flex justify-between items-center mb-8">
+      <div class="flex items-center space-x-3">
+        <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+          <i class="fas fa-search text-white text-lg"></i>
         </div>
+        <h1 class="text-2xl font-bold text-white">Forensic Search System</h1>
+      </div>
+      <div class="text-sm text-slate-400">
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="hover:text-blue-400 transition-colors">
+          Built with anycoder
+        </a>
+      </div>
+    </header>
+    <!-- Main Content -->
+    <div id="app" class="space-y-6">
+      <!-- Status Bar -->
+      <div id="status" class="text-xs text-slate-500 mb-4 flex items-center space-x-2">
+        <span class="w-2 h-2 rounded-full bg-yellow-500 animate-pulse"></span>
+        <span>Aguardando Autenticação...</span>
+      </div>
+      <!-- Search Form -->
+      <div class="gradient-border">
+        <div class="gradient-border-content p-6">
+          <form id="searchForm" class="space-y-4">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div>
+                <label class="block text-sm font-medium text-slate-300 mb-1">CPF</label>
+                <input type="text" id="cpf" placeholder="000.000.000-00"
+                       class="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-slate-300 mb-1">Rede Social</label>
+                <select id="socialNetwork" class="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
+                  <option value="facebook">Facebook</option>
+                  <option value="twitter">Twitter/X</option>
+                  <option value="instagram">Instagram</option>
+                  <option value="linkedin">LinkedIn</option>
+                  <option value="tiktok">TikTok</option>
+                </select>
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-slate-300 mb-1">Perfil</label>
+                <input type="text" id="profileUrl" placeholder="https://social.com/username"
+                       class="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
+              </div>
             </div>
+            <div class="flex justify-end">
+              <button id="btnSearch" type="submit" class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-2 rounded-lg font-medium hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed">
+                <i class="fas fa-search mr-2"></i>
+                Iniciar Pesquisa Forense
+              </button>
             </div>
+          </form>
+        </div>
+      </div>
+      <!-- Results Dashboard -->
+      <div id="resultsDashboard" class="hidden space-y-6">
+        <!-- Summary Cards -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <div class="card-glow bg-slate-800 p-6 rounded-xl">
+            <div class="flex items-center space-x-3 mb-4">
+              <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center">
+                <i class="fas fa-user text-white"></i>
+              </div>
+              <div>
+                <h3 class="text-lg font-semibold text-white">Perfil Analisado</h3>
+                <p id="profileName" class="text-slate-300">-</p>
+              </div>
+            </div>
+            <div class="space-y-2">
+              <div class="flex justify-between">
+                <span class="text-sm text-slate-400">Postagens Analisadas</span>
+                <span id="postsCount" class="text-lg font-bold text-white">0</span>
+              </div>
+              <div class="flex justify-between">
+                <span class="text-sm text-slate-400">Período Coberto</span>
+                <span id="periodCovered" class="text-lg font-bold text-white">-</span>
+              </div>
             </div>
           </div>
+          <div class="card-glow bg-slate-800 p-6 rounded-xl">
+            <div class="flex items-center space-x-3 mb-4">
+              <div class="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center">
+                <i class="fas fa-chart-line text-white"></i>
+              </div>
+              <div>
+                <h3 class="text-lg font-semibold text-white">Atividade</h3>
+                <p class="text-slate-300">Métricas de Engajamento</p>
+              </div>
+            </div>
+            <div class="space-y-2">
+              <div class="flex justify-between">
+                <span class="text-sm text-slate-400">Média Diária</span>
+                <span id="dailyAvg" class="text-lg font-bold text-white">0</span>
+              </div>
+              <div class="flex justify-between">
+                <span class="text-sm text-slate-400">Pico de Atividade</span>
+                <span id="peakActivity" class="text-lg font-bold text-white">-</span>
+              </div>
+            </div>
           </div>
+          <div class="card-glow bg-slate-800 p-6 rounded-xl">
+            <div class="flex items-center space-x-3 mb-4">
+              <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center">
+                <i class="fas fa-exclamation-triangle text-white"></i>
+              </div>
+              <div>
+                <h3 class="text-lg font-semibold text-white">Riscos Detectados</h3>
+                <p class="text-slate-300">Avaliação de Perigo</p>
+              </div>
+            </div>
+            <div class="space-y-2">
+              <div class="flex justify-between">
+                <span class="text-sm text-slate-400">Nível de Risco</span>
+                <span id="riskLevel" class="text-lg font-bold text-red-400">Baixo</span>
+              </div>
+              <div class="w-full h-2 bg-slate-700 rounded-full mt-2">
+                <div id="riskMeter" class="h-full rounded-full risk-meter" style="width: 20%"></div>
+              </div>
+            </div>
           </div>
+          <div class="card-glow bg-slate-800 p-6 rounded-xl">
+            <div class="flex items-center space-x-3 mb-4">
+              <div class="w-12 h-12 bg-green-600 rounded-full flex items-center justify-center">
+                <i class="fas fa-network-wired text-white"></i>
+              </div>
               <div>
+                <h3 class="text-lg font-semibold text-white">Conexões</h3>
+                <p class="text-slate-300">Rede Social</p>
+              </div>
+            </div>
+            <div class="space-y-2">
+              <div class="flex justify-between">
+                <span class="text-sm text-slate-400">Seguidores</span>
+                <span id="followers" class="text-lg font-bold text-white">0</span>
               </div>
+              <div class="flex justify-between">
+                <span class="text-sm text-slate-400">Seguindo</span>
+                <span id="following" class="text-lg font-bold text-white">0</span>
               </div>
             </div>
           </div>
+        </div>
+        <!-- Detailed Analysis -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <!-- Timeline -->
+          <div class="lg:col-span-2 space-y-4">
+            <div class="gradient-border">
+              <div class="gradient-border-content p-6">
+                <h2 class="text-xl font-bold text-white mb-4 flex items-center">
+                  <i class="fas fa-clock mr-2"></i>
+                  Linha do Tempo
+                </h2>
+                <div id="timeline" class="space-y-6">
+                  <!-- Timeline items will be added here -->
                 </div>
               </div>
             </div>
+            <!-- Content Analysis -->
+            <div class="gradient-border">
+              <div class="gradient-border-content p-6">
+                <h2 class="text-xl font-bold text-white mb-4 flex items-center">
+                  <i class="fas fa-chart-pie mr-2"></i>
+                  Análise de Conteúdo
+                </h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <h3 class="text-lg font-semibold text-white mb-2">Tópicos Principais</h3>
+                    <div id="topicsChart" class="h-48 bg-slate-800 rounded-lg flex items-center justify-center">
+                      <span class="text-slate-400">Gráfico de tópicos</span>
+                    </div>
                   </div>
+                  <div>
+                    <h3 class="text-lg font-semibold text-white mb-2">Sentimento</h3>
+                    <div id="sentimentChart" class="h-48 bg-slate-800 rounded-lg flex items-center justify-center">
+                      <span class="text-slate-400">Gráfico de sentimento</span>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
+          </div>
+          <!-- Network Graph -->
+          <div class="space-y-4">
+            <div class="gradient-border">
+              <div class="gradient-border-content p-6">
+                <h2 class="text-xl font-bold text-white mb-4 flex items-center">
+                  <i class="fas fa-project-diagram mr-2"></i>
+                  Rede de Conexões
+                </h2>
+                <div id="networkGraph" class="h-64 bg-slate-800 rounded-lg network-graph flex items-center justify-center">
+                  <span class="text-slate-400">Visualização de rede</span>
                 </div>
               </div>
             </div>
+            <!-- Risk Assessment -->
+            <div class="gradient-border">
+              <div class="gradient-border-content p-6">
+                <h2 class="text-xl font-bold text-white mb-4 flex items-center">
+                  <i class="fas fa-shield-alt mr-2"></i>
+                  Avaliação de Risco
+                </h2>
+                <div class="space-y-4">
+                  <div>
+                    <h3 class="text-lg font-semibold text-white mb-2">Alertas</h3>
+                    <div id="riskAlerts" class="space-y-2">
+                      <!-- Risk alerts will be added here -->
+                    </div>
+                  </div>
+                  <div>
+                    <h3 class="text-lg font-semibold text-white mb-2">Recomendações</h3>
+                    <div id="recommendations" class="space-y-2">
+                      <!-- Recommendations will be added here -->
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
+        </div>
+      </div>
+      <!-- Loading State -->
+      <div id="loadingState" class="hidden text-center py-12">
+        <div class="loading-spinner mx-auto mb-4"></div>
+        <h3 class="text-xl font-semibold text-white mb-2">Processando Análise Forense</h3>
+        <p class="text-slate-400">Estamos coletando e analisando dados dos últimos 5 anos...</p>
+        <div class="mt-4 text-sm text-slate-500">
+          <p>Esta operação pode levar alguns minutos dependendo da quantidade de dados.</p>
+          <p>Por favor, não feche esta janela.</p>
+        </div>
+      </div>
+      <!-- Error State -->
+      <div id="errorState" class="hidden bg-red-900/20 border border-red-500 rounded-lg p-4 text-red-300">
+        <div class="flex items-start space-x-3">
+          <i class="fas fa-exclamation-circle text-red-400 mt-1"></i>
+          <div>
+            <h3 class="font-semibold text-white mb-2">Erro na Análise</h3>
+            <p id="errorMessage">Ocorreu um erro ao processar sua solicitação.</p>
           </div>
         </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    // Configuration
+    const PLUGIN_ID = "forensic-search-system-v1";
+    let authToken = null;
+    let currentAnalysis = null;
+    // DOM Elements
+    const statusElement = document.getElementById('status');
+    const searchForm = document.getElementById('searchForm');
+    const btnSearch = document.getElementById('btnSearch');
+    const resultsDashboard = document.getElementById('resultsDashboard');
+    const loadingState = document.getElementById('loadingState');
+    const errorState = document.getElementById('errorState');
+    // 1. Authentication Handshake
+    window.addEventListener('message', (event) => {
+      if (event.data.type === 'AUTH_TOKEN') {
+        authToken = event.data.token;
+        statusElement.innerHTML = `
+          <span class="w-2 h-2 rounded-full bg-green-500"></span>
+          <span>Autenticado com sucesso</span>
+        `;
+        btnSearch.disabled = false;
+      }
+    });
+    // 2. Form Submission
+    searchForm.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      if (!authToken) {
+        showError("Token de autenticação não disponível");
+        return;
+      }
+      // Get form values
+      const cpf = document.getElementById('cpf').value;
+      const socialNetwork = document.getElementById('socialNetwork').value;
+      const profileUrl = document.getElementById('profileUrl').value;
+      if (!cpf || !profileUrl) {
+        showError("Por favor, preencha todos os campos obrigatórios");
+        return;
+      }
+      // Show loading state
+      resultsDashboard.classList.add('hidden');
+      loadingState.classList.remove('hidden');
+      errorState.classList.add('hidden');
+      try {
+        // Call AI Gateway
+        const analysis = await callAIGateway(cpf, socialNetwork, profileUrl);
+        currentAnalysis = analysis;
+        renderResults(analysis);
+      } catch (error) {
+        showError(error.message || "Falha ao processar a análise");
+      }
+    });
+    // 3. AI Gateway Call
+    async function callAIGateway(cpf, socialNetwork, profileUrl) {
+      try {
+        const response = await fetch('/api/client/plugin/ai', {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${authToken}`,
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            plugin_id: PLUGIN_ID,
+            user_prompt: `Analise forensicamente o perfil ${profileUrl} na rede social ${socialNetwork} associado ao CPF ${cpf}. Colete dados dos últimos 5 anos e gere um relatório detalhado com:
+            1. Informações básicas do perfil
+            2. Análise de atividade (postagens, engajamento)
+            3. Linha do tempo de eventos significativos
+            4. Análise de conteúdo (tópicos, sentimento)
+            5. Rede de conexões
+            6. Avaliação de risco
+            7. Alertas e recomendações
+            Formate a resposta como JSON com a seguinte estrutura:
+            {
+              "profile": {...},
+              "activity": {...},
+              "timeline": [...],
+              "contentAnalysis": {...},
+              "network": {...},
+              "riskAssessment": {...}
+            }`
+          })
         });
+        if (!response.ok) {
+          throw new Error(`Erro na API: ${response.status}`);
         }
+        const data = await response.json();
+        return JSON.parse(data.response); // Assuming the AI returns JSON in the response field
+      } catch (error) {
+        console.error("Error calling AI Gateway:", error);
+        throw error;
+      }
+    }
+    // 4. Render Results
+    function renderResults(analysis) {
+      // Hide loading state
+      loadingState.classList.add('hidden');
+      // Populate summary cards
+      document.getElementById('profileName').textContent = analysis.profile.name || '-';
+      document.getElementById('postsCount').textContent = analysis.activity.postsCount || '0';
+      document.getElementById('periodCovered').textContent = analysis.activity.period || '-';
+      document.getElementById('dailyAvg').textContent = analysis.activity.dailyAverage || '0';
+      document.getElementById('peakActivity').textContent = analysis.activity.peakDate || '-';
+      // Risk assessment
+      const riskLevel = analysis.riskAssessment.level || 'Baixo';
+      const riskPercentage = getRiskPercentage(riskLevel);
+      document.getElementById('riskLevel').textContent = riskLevel;
+      document.getElementById('riskMeter').style.width = `${riskPercentage}%`;
+      // Network
+      document.getElementById('followers').textContent = analysis.network.followers || '0';
+      document.getElementById('following').textContent = analysis.network.following || '0';
+      // Render timeline
+      renderTimeline(analysis.timeline);
+      // Render risk alerts and recommendations
+      renderAlerts(analysis.riskAssessment.alerts);
+      renderRecommendations(analysis.riskAssessment.recommendations);
+      // Show results
+      resultsDashboard.classList.remove('hidden');
+    }
+    // 5. Helper Functions
+    function getRiskPercentage(level) {
+      const levels = {
+        'Baixo': 20,
+        'Médio': 50,
+        'Alto': 80,
+        'Crítico': 100
       };
+      return levels[level] || 20;
+    }
+    function renderTimeline(items) {
+      const timelineElement = document.getElementById('timeline');
+      timelineElement.innerHTML = '';
+      if (!items || items.length === 0) {
+        timelineElement.innerHTML = '<p class="text-slate-400">Nenhum evento significativo encontrado.</p>';
+        return;
+      }
+      items.forEach(item => {
+        const timelineItem = document.createElement('div');
+        timelineItem.className = 'relative pl-8 pb-4';
+        timelineItem.innerHTML = `
+          <div class="timeline-dot"></div>
+          <div class="bg-slate-800 p-4 rounded-lg border border-slate-700">
+            <div class="flex justify-between items-start mb-2">
+              <h4 class="font-semibold text-white">${item.title}</h4>
+              <span class="text-xs text-slate-400">${item.date}</span>
+            </div>
+            <p class="text-slate-300 mb-3">${item.description}</p>
+            ${item.tags ? `
+              <div class="flex flex-wrap gap-2">
+                ${item.tags.map(tag => `
+                  <span class="px-2 py-1 bg-slate-700 text-xs rounded-full text-slate-300">${tag}</span>
+                `).join('')}
+              </div>
+            ` : ''}
+          </div>
+        `;
+        timelineElement.appendChild(timelineItem);
+      });
+    }
+    function renderAlerts(alerts) {
+      const alertsElement = document.getElementById('riskAlerts');
+      alertsElement.innerHTML = '';
+      if (!alerts || alerts.length === 0) {
+        alertsElement.innerHTML = '<p class="text-slate-400 text-sm">Nenhum alerta encontrado.</p>';
+        return;
+      }
+      alerts.forEach(alert => {
+        const alertElement = document.createElement('div');
+        alertElement.className = 'bg-red-900/30 border border-red-500 rounded-lg p-3';
+        alertElement.innerHTML = `
+          <div class="flex items-start space-x-3">
+            <i class="fas fa-exclamation-triangle text-red-400 mt-1"></i>
+            <div>
+              <h4 class="font-semibold text-white">${alert.title}</h4>
+              <p class="text-red-300 text-sm">${alert.description}</p>
+              ${alert.severity ? `
+                <span class="text-xs text-red-400 mt-1 block">Severidade: ${alert.severity}</span>
+              ` : ''}
+            </div>
+          </div>
+        `;
+        alertsElement.appendChild(alertElement);
+      });
+    }
+    function renderRecommendations(recommendations) {
+      const recElement = document.getElementById('recommendations');
+      recElement.innerHTML = '';
+      if (!recommendations || recommendations.length === 0) {
+        recElement.innerHTML = '<p class="text-slate-400 text-sm">Nenhuma recomendação.</p>';
+        return;
+      }
+      recommendations.forEach(rec => {
+        const recElementItem = document.createElement('div');
+        recElementItem.className = 'bg-blue-900/30 border border-blue-500 rounded-lg p-3';
+        recElementItem.innerHTML = `
+          <div class="flex items-start space-x-3">
+            <i class="fas fa-lightbulb text-blue-400 mt-1"></i>
+            <div>
+              <h4 class="font-semibold text-white">${rec.title}</h4>
+              <p class="text-blue-300 text-sm">${rec.description}</p>
+            </div>
+          </div>
+        `;
+        recElement.appendChild(recElementItem);
+      });
+    }
+    function showError(message) {
+      loadingState.classList.add('hidden');
+      errorState.classList.remove('hidden');
+      document.getElementById('errorMessage').textContent = message;
+    }
+    // Initialize
+    document.addEventListener('DOMContentLoaded', () => {
+      // Check if we're in an iframe
+      if (window.self !== window.top) {
+        // Send ready message to parent
+        window.parent.postMessage({ type: 'PLUGIN_READY', pluginId: PLUGIN_ID }, '*');
+      }
+    });
   </script>
 </body>
 </html>