Delete collection

collection/index.html

@@ -1,420 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>The Third Voice</title>
-    <meta name="description" content="The Third Voice: AI-powered communication assistant for reframing messages with emotional intelligence.">
-    <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
-
-        :root {
-            --primary-color: #007BFF;
-            --secondary-color: #28A745;
-            --text-color: #333;
-            --bg-color: #F8F9FA;
-            --card-bg: #FFFFFF;
-            --border-color: #DEE2E6;
-            --error-color: #DC3545;
-        }
-
-        body {
-            font-family: 'Inter', sans-serif;
-            line-height: 1.6;
-            margin: 0;
-            padding: 20px;
-            background-color: var(--bg-color);
-            color: var(--text-color);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            min-height: 100vh;
-            box-sizing: border-box;
-        }
-
-        .container {
-            background-color: var(--card-bg);
-            padding: 30px;
-            border-radius: 12px;
-            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
-            width: 100%;
-            max-width: 700px;
-            box-sizing: border-box;
-            margin-bottom: 20px;
-        }
-
-        h1 {
-            text-align: center;
-            color: var(--primary-color);
-            margin-bottom: 30px;
-            font-weight: 700;
-            font-size: 2em;
-        }
-
-        .logo-container {
-            text-align: center;
-            margin-bottom: 20px;
-        }
-        .logo {
-            width: 60px;
-            height: auto;
-        }
-
-        label {
-            display: block;
-            margin-bottom: 8px;
-            font-weight: 600;
-            color: var(--text-color);
-        }
-
-        textarea {
-            width: 100%;
-            padding: 12px;
-            margin-bottom: 20px;
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            font-family: 'Inter', sans-serif;
-            font-size: 1em;
-            box-sizing: border-box;
-            resize: vertical;
-            min-height: 100px;
-        }
-
-        select {
-            width: 100%;
-            padding: 12px;
-            margin-bottom: 20px;
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            font-family: 'Inter', sans-serif;
-            font-size: 1em;
-            box-sizing: border-box;
-            background-color: var(--card-bg);
-            color: var(--text-color);
-        }
-
-        button {
-            display: block;
-            width: 100%;
-            padding: 15px;
-            background-color: var(--primary-color);
-            color: white;
-            border: none;
-            border-radius: 8px;
-            font-size: 1.1em;
-            font-weight: 700;
-            cursor: pointer;
-            transition: background-color 0.3s ease, transform 0.2s ease;
-        }
-
-        button:hover {
-            background-color: #0056b3;
-            transform: translateY(-2px);
-        }
-
-        button:disabled {
-            background-color: #cccccc;
-            cursor: not-allowed;
-            transform: translateY(0);
-        }
-
-        .loader {
-            border: 4px solid #f3f3f3;
-            border-top: 4px solid var(--primary-color);
-            border-radius: 50%;
-            width: 20px;
-            height: 20px;
-            animation: spin 1s linear infinite;
-            display: inline-block;
-            vertical-align: middle;
-            margin-left: 10px;
-            display: none; /* Hidden by default */
-        }
-
-        button.loading .loader {
-            display: inline-block;
-        }
-
-        button.loading span {
-            display: none;
-        }
-
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-
-        #error-message {
-            color: var(--error-color);
-            text-align: center;
-            margin-top: -10px;
-            margin-bottom: 20px;
-            font-weight: 600;
-            display: none;
-        }
-
-        .result-container {
-            background-color: var(--bg-color);
-            padding: 25px;
-            border-radius: 10px;
-            border: 1px solid var(--border-color);
-            margin-top: 30px;
-            display: none; /* Hidden by default */
-        }
-
-        .result-container h2 {
-            color: var(--primary-color);
-            font-size: 1.4em;
-            margin-top: 0;
-            margin-bottom: 15px;
-        }
-
-        #rewritten-message {
-            background-color: var(--card-bg);
-            padding: 15px;
-            border-radius: 8px;
-            border: 1px solid var(--border-color);
-            font-size: 1.1em;
-            white-space: pre-wrap; /* Preserves whitespace and wraps text */
-            word-wrap: break-word; /* Breaks long words if necessary */
-            margin-bottom: 15px;
-        }
-
-        #tone-analysis, #suggestion {
-            font-size: 0.95em;
-            color: var(--text-color);
-            margin-bottom: 10px;
-        }
-        #tone-analysis { font-weight: 600; }
-        #suggestion { font-style: italic; }
-
-        .disclaimer {
-            font-size: 0.85em;
-            color: #6c757d;
-            text-align: center;
-            margin-top: 20px;
-            padding: 15px;
-            border: 1px dashed #ced4da;
-            border-radius: 8px;
-            background-color: #e9ecef;
-        }
-        .disclaimer a {
-            color: #007bff;
-            text-decoration: none;
-        }
-        .disclaimer a:hover {
-            text-decoration: underline;
-        }
-
-        footer {
-            margin-top: auto; /* Pushes footer to the bottom */
-            padding: 20px;
-            font-size: 0.8em;
-            color: #6c757d;
-            text-align: center;
-        }
-        footer a {
-            color: #007bff;
-            text-decoration: none;
-        }
-        footer a:hover {
-            text-decoration: underline;
-        }
-
-        /* Responsive Adjustments */
-        @media (max-width: 600px) {
-            body {
-                padding: 10px;
-            }
-            .container {
-                padding: 20px;
-            }
-            h1 {
-                font-size: 1.8em;
-            }
-            button {
-                padding: 12px;
-                font-size: 1em;
-            }
-            .result-container {
-                padding: 15px;
-            }
-            #rewritten-message {
-                font-size: 1em;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="logo-container">
-            <img src="/static/favicon.ico" alt="The Third Voice Logo" class="logo">
-        </div>
-        <h1>The Third Voice</h1>
-        <p class="disclaimer">
-            The Third Voice is an AI-powered communication assistant. It rewrites your messages using emotional intelligence.
-            <br>
-            <small>Built with love by Predrag Mirkovic. <a href="https://thethirdvoice.ai/terms" target="_blank">Terms & Privacy</a> (Placeholder)</small>
-        </p>
-
-        <label for="message-input">Your Message:</label>
-        <textarea id="message-input" placeholder="Type or paste your message here..."></textarea>
-
-        <label for="tone-select">Choose a Tone:</label>
-        <select id="tone-select">
-            <option value="Kind">Kind</option>
-            <option value="Direct">Direct</option>
-            <option value="Neutral">Neutral</option>
-            <option value="Empathetic">Empathetic</option>
-            <option value="Professional">Professional</option>
-        </select>
-
-        <button id="rewrite-btn">
-            <span>Rewrite It</span>
-            <div class="loader"></div>
-        </button>
-
-        <div id="error-message"></div>
-
-        <div id="result-container" class="result-container">
-            <h2>Rewritten Message:</h2>
-            <div id="rewritten-message"></div>
-            <p id="tone-analysis"></p>
-            <p id="suggestion"></p>
-        </div>
-    </div>
-
-    <div class="disclaimer">
-        This is an AI-powered prototype. Results may vary. Always review rewritten messages before sending.
-        <br>
-        For more information, visit <a href="https://thethirdvoice.ai" target="_blank">thethirdvoice.ai</a>
-    </div>
-
-    <footer>
-        © 2025 The Third Voice. All rights reserved. <a href="https://thethirdvoice.ai/privacy" target="_blank">Privacy Policy</a> | <a href="https://thethirdvoice.ai/terms" target="_blank">Terms of Service</a>
-    </footer>
-
-    <script>
-        const messageInput = document.getElementById('message-input');
-        const toneSelect = document.getElementById('tone-select');
-        const rewriteBtn = document.getElementById('rewrite-btn');
-        const errorMessageDiv = document.getElementById('error-message');
-        const resultDiv = document.getElementById('result-container');
-        const rewrittenMessage = document.getElementById('rewritten-message');
-        const toneAnalysis = document.getElementById('tone-analysis');
-        const suggestion = document.getElementById('suggestion');
-
-        let selectedTone = toneSelect.value;
-
-        toneSelect.addEventListener('change', (event) => {
-            selectedTone = event.target.value;
-        });
-
-        function showError(message) {
-            errorMessageDiv.textContent = message;
-            errorMessageDiv.style.display = 'block';
-        }
-
-        function hideError() {
-            errorMessageDiv.style.display = 'none';
-            errorMessageDiv.textContent = '';
-        }
-
-        // AI call now goes to the same Hugging Face Space
-        const hfSpaceApiUrl = "/rewrite"; // <-- THIS IS THE CRUCIAL CHANGE!
-
-        rewriteBtn.addEventListener('click', async () => {
-            const message = messageInput.value.trim();
-            if (!message) {
-                showError('Please enter a message to rewrite.');
-                return;
-            }
-
-            if (message.length < 5) {
-                showError('Please enter a slightly longer message for better AI rewriting.');
-                return;
-            }
-
-            hideError();
-            rewriteBtn.classList.add('loading');
-            rewriteBtn.textContent = 'Rewriting...';
-            rewriteBtn.disabled = true;
-            resultDiv.style.display = 'none'; // Hide previous results
-
-            try {
-                const response = await fetch(hfSpaceApiUrl, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({ message: message, tone: selectedTone })
-                });
-
-                const data = await response.json();
-
-                if (!response.ok) {
-                    console.error("AI API Error:", data.error || response.statusText);
-                    showError(`AI rewrite failed: ${data.error || 'Server error'}. Please try again later.`);
-                    return;
-                }
-
-                if (data.rewrittenText) {
-                    const rewritten = data.rewrittenText;
-                    const originalTone = analyzeOriginalTone(message);
-
-                    rewrittenMessage.textContent = rewritten;
-                    toneAnalysis.textContent = `Original Tone: ${originalTone} → Target Tone: ${selectedTone}`;
-                    suggestion.textContent = getSuggestion(selectedTone, originalTone, rewritten);
-
-                    resultDiv.style.display = 'block';
-                    resultDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-                } else {
-                    showError('AI did not return a valid rewritten message. Try again.');
-                }
-
-            } catch (error) {
-                console.error('Network or API call error:', error);
-                showError('Could not reach the AI service. Please check your internet or try again later.');
-            } finally {
-                rewriteBtn.classList.remove('loading');
-                rewriteBtn.textContent = 'Rewrite It';
-                rewriteBtn.disabled = false;
-            }
-        });
-
-
-        // --- Helper Functions (Client-Side, used for UI display) ---
-
-        // Simple client-side tone analysis
-        function analyzeOriginalTone(message) {
-            const lowerMessage = message.toLowerCase();
-            if (lowerMessage.includes('hate') || lowerMessage.includes('angry') || lowerMessage.includes('frustrated')) {
-                return 'Negative';
-            } else if (lowerMessage.includes('love') || lowerMessage.includes('happy') || lowerMessage.includes('joy')) {
-                return 'Positive';
-            } else if (lowerMessage.includes('should') || lowerMessage.includes('must') || lowerMessage.includes('demand')) {
-                return 'Demanding';
-            } else if (lowerMessage.includes('perhaps') || lowerMessage.includes('maybe') || lowerMessage.includes('suggest')) {
-                return 'Suggestive';
-            }
-            return 'Neutral/Unclear';
-        }
-
-        // Simple client-side suggestion based on tone
-        function getSuggestion(targetTone, originalTone, rewritten) {
-            if (originalTone === 'Negative' && targetTone === 'Kind') {
-                return "Great job reframing negativity into kindness. Always review for genuine intent.";
-            } else if (originalTone === 'Demanding' && targetTone === 'Empathetic') {
-                return "Transforming demands into empathetic requests can significantly improve reception.";
-            } else if (originalTone === 'Neutral/Unclear' && targetTone === 'Direct') {
-                return "Sometimes clarity is key. This direct approach ensures your message is understood.";
-            } else if (originalTone === 'Positive' && targetTone === 'Professional') {
-                return "Even positive messages benefit from professional framing in certain contexts.";
-            }
-            return "Review the rewritten message to ensure it perfectly matches your desired impact.";
-        }
-
-    </script>
-</body>
-</html>