I want to build a web application in Portuguese (Brazilian) that works like a visualizer and organizer for WhatsApp exported conversations with media.
Browse files### PURPOSE:
The app should display .txt or .zip exports from WhatsApp Web with media (including audio), parse them into a chat-like UI, and allow the user to interact with the data.
### UI LAYOUT:
- Main layout should visually replicate WhatsApp's chat interface
- Light and dark mode switch (default: dark mode like WhatsApp)
- Messages must be shown in speech-bubble style cards
- Timestamps on the right
- Usernames at the top of each message
- Profile image optional
### MESSAGE TYPES:
- Text messages (normal)
- Audio messages: rendered using a simple HTML audio player
- Media attachments (ignored for now)
- System messages (grey background, centered)
### AUDIO MESSAGES:
- Under each audio message, add a button labeled “Transcrever” (in Portuguese)
- When clicked, transcribes the audio using Whisper API (or a local placeholder function)
- The transcription appears directly below the audio, styled like a regular WhatsApp message bubble
- Optional: show status ("Transcrevendo..." → "Pronto")
### FUNCTIONALITIES:
- Upload WhatsApp .txt or .zip file
- Parse and render messages in correct order
- Button to “Selecionar mensagens”
- Button to “Transcrever tudo”
- Button to “Exportar PDF com selecionadas”
- Button to “Limpar tudo”
- Optional: fuzzy search bar at the top (“Buscar mensagens”)
### LANGUAGES:
- The UI must be in **Portuguese**
- The code and comments can be in English
### STACK:
- Frontend-only React app
- Preferably using Vite + React + TailwindCSS
- Use IndexedDB or LocalStorage for caching transcripts
- Use React Context or Jotai for state management
### VISUAL STYLE:
- Reproduce WhatsApp dark UI colors
- Speech bubbles: green for sent, gray for received
- Flat style with shadows, no neumorphism
- Font: Segoe UI or Roboto
### AUDIO TRANSCRIPTION:
- Simulate Whisper API locally (or integrate if available)
- All transcriptions in **Portuguese**
- README.md +7 -4
- index.html +70 -18
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
colorFrom: indigo
|
| 5 |
colorTo: green
|
|
|
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: ZappVisualizer - WhatsApp Chat Explorer 🗂️
|
| 3 |
+
colorFrom: green
|
|
|
|
| 4 |
colorTo: green
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
|
@@ -1,19 +1,71 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="pt-BR">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>ZappVisualizer - Visualizador de Conversas do WhatsApp</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 9 |
+
<script>
|
| 10 |
+
tailwind.config = {
|
| 11 |
+
darkMode: 'class',
|
| 12 |
+
theme: {
|
| 13 |
+
extend: {
|
| 14 |
+
colors: {
|
| 15 |
+
whatsapp: {
|
| 16 |
+
dark: '#0c1317',
|
| 17 |
+
darker: '#111b21',
|
| 18 |
+
bubbleSent: '#005c4b',
|
| 19 |
+
bubbleReceived: '#202c33',
|
| 20 |
+
textLight: '#e9edef',
|
| 21 |
+
textSecondary: '#8696a0',
|
| 22 |
+
systemMessage: '#182229',
|
| 23 |
+
}
|
| 24 |
+
},
|
| 25 |
+
fontFamily: {
|
| 26 |
+
'segoe': ['Segoe UI', 'Roboto', 'sans-serif']
|
| 27 |
+
}
|
| 28 |
+
}
|
| 29 |
+
}
|
| 30 |
+
}
|
| 31 |
+
</script>
|
| 32 |
+
<style>
|
| 33 |
+
body {
|
| 34 |
+
font-family: 'Segoe UI', Roboto, sans-serif;
|
| 35 |
+
-webkit-font-smoothing: antialiased;
|
| 36 |
+
}
|
| 37 |
+
.chat-bubble-sent {
|
| 38 |
+
background-color: theme('colors.whatsapp.bubbleSent');
|
| 39 |
+
border-radius: 7.5px 0 7.5px 7.5px;
|
| 40 |
+
}
|
| 41 |
+
.chat-bubble-received {
|
| 42 |
+
background-color: theme('colors.whatsapp.bubbleReceived');
|
| 43 |
+
border-radius: 0 7.5px 7.5px 7.5px;
|
| 44 |
+
}
|
| 45 |
+
.system-message {
|
| 46 |
+
background-color: theme('colors.whatsapp.systemMessage');
|
| 47 |
+
border-radius: 7.5px;
|
| 48 |
+
max-width: 80%;
|
| 49 |
+
margin: 0 auto;
|
| 50 |
+
}
|
| 51 |
+
/* Custom scrollbar */
|
| 52 |
+
::-webkit-scrollbar {
|
| 53 |
+
width: 6px;
|
| 54 |
+
}
|
| 55 |
+
::-webkit-scrollbar-track {
|
| 56 |
+
background: theme('colors.whatsapp.darker');
|
| 57 |
+
}
|
| 58 |
+
::-webkit-scrollbar-thumb {
|
| 59 |
+
background: theme('colors.whatsapp.bubbleReceived');
|
| 60 |
+
border-radius: 3px;
|
| 61 |
+
}
|
| 62 |
+
</style>
|
| 63 |
+
</head>
|
| 64 |
+
<body class="bg-whatsapp-dark text-whatsapp-textLight font-segoe">
|
| 65 |
+
<div id="root"></div>
|
| 66 |
+
<script type="module" src="/src/main.jsx"></script>
|
| 67 |
+
<script>
|
| 68 |
+
feather.replace();
|
| 69 |
+
</script>
|
| 70 |
+
</body>
|
| 71 |
</html>
|