Spaces:

Chasme
/

bloc-note

Running

App Files Files Community

Chasme commited on Apr 5, 2025

Commit

769c9f5

verified ·

1 Parent(s): d6a70a9

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +484 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Bloc Note
-emoji: 🏆
-colorFrom: purple
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: bloc-note
+emoji: 🐳
+colorFrom: gray
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,484 @@
-<!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 lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Notorium - Bloc-notes intelligent</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">
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        dark: {
+                            900: '#0a0a0a',
+                            800: '#1a1a1a',
+                            700: '#2a2a2a',
+                            600: '#3a3a3a',
+                        },
+                        primary: {
+                            500: '#6366f1',
+                            600: '#4f46e5',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .note-content {
+            min-height: 300px;
+            line-height: 1.6;
+        }
+        .suggestion-item:hover {
+            background-color: rgba(99, 102, 241, 0.2);
+        }
+        .fade-in {
+            animation: fadeIn 0.3s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .separator {
+            border-top: 1px dashed rgba(255,255,255,0.1);
+            margin: 1rem 0;
+        }
+    </style>
+</head>
+<body class="bg-dark-900 text-gray-200 min-h-screen">
+    <div class="container mx-auto px-4 py-8 max-w-4xl">
+        <!-- Header -->
+        <header class="flex justify-between items-center mb-8">
+            <div class="flex items-center space-x-3">
+                <i class="fas fa-book-open text-primary-500 text-2xl"></i>
+                <h1 class="text-2xl font-bold">Notorium</h1>
+            </div>
+            <div class="flex space-x-4">
+                <button id="searchBtn" class="p-2 rounded-full hover:bg-dark-700 transition">
+                    <i class="fas fa-search"></i>
+                </button>
+                <button id="settingsBtn" class="p-2 rounded-full hover:bg-dark-700 transition">
+                    <i class="fas fa-cog"></i>
+                </button>
+            </div>
+        </header>
+        <!-- Search Modal -->
+        <div id="searchModal" class="hidden fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center p-4">
+            <div class="bg-dark-800 rounded-lg w-full max-w-md p-6">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-lg font-semibold">Rechercher dans vos notes</h3>
+                    <button id="closeSearch" class="text-gray-400 hover:text-white">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <input type="text" placeholder="Tapez pour rechercher..." class="w-full bg-dark-700 border border-dark-600 rounded-md px-4 py-2 mb-4 focus:outline-none focus:ring-2 focus:ring-primary-500">
+                <div class="flex space-x-2 mb-4">
+                    <select class="bg-dark-700 border border-dark-600 rounded-md px-3 py-1 text-sm">
+                        <option>Toutes les dates</option>
+                        <option>Aujourd'hui</option>
+                        <option>Cette semaine</option>
+                        <option>Ce mois</option>
+                    </select>
+                    <select class="bg-dark-700 border border-dark-600 rounded-md px-3 py-1 text-sm">
+                        <option>Tous les tags</option>
+                        <option>Professionnel</option>
+                        <option>Créatif</option>
+                        <option>Personnel</option>
+                    </select>
+                </div>
+                <div id="searchResults" class="max-h-60 overflow-y-auto">
+                    <!-- Results will appear here -->
+                </div>
+            </div>
+        </div>
+        <!-- Note Editor -->
+        <div class="bg-dark-800 rounded-xl shadow-lg overflow-hidden mb-6">
+            <!-- Toolbar -->
+            <div class="flex items-center px-4 py-2 bg-dark-700 border-b border-dark-600">
+                <div class="flex space-x-2">
+                    <button class="p-2 rounded hover:bg-dark-600" title="Gras" onclick="formatText('bold')">
+                        <i class="fas fa-bold"></i>
+                    </button>
+                    <button class="p-2 rounded hover:bg-dark-600" title="Italique" onclick="formatText('italic')">
+                        <i class="fas fa-italic"></i>
+                    </button>
+                    <button class="p-2 rounded hover:bg-dark-600" title="Liste à puces" onclick="formatText('insertUnorderedList')">
+                        <i class="fas fa-list-ul"></i>
+                    </button>
+                </div>
+                <div class="ml-auto flex space-x-2">
+                    <button id="suggestBtn" class="px-3 py-1 bg-dark-600 hover:bg-primary-500 rounded-md text-sm flex items-center space-x-1 transition">
+                        <i class="fas fa-lightbulb"></i>
+                        <span>Suggestions</span>
+                    </button>
+                    <button id="generateBtn" class="px-3 py-1 bg-primary-500 hover:bg-primary-600 rounded-md text-sm flex items-center space-x-1 transition">
+                        <i class="fas fa-magic"></i>
+                        <span>Générer</span>
+                    </button>
+                </div>
+            </div>
+            <!-- Editor -->
+            <div class="p-4">
+                <div id="noteEditor" class="note-content outline-none" contenteditable="true" placeholder="Commencez à écrire ici..."></div>
+            </div>
+        </div>
+        <!-- Suggestions Panel -->
+        <div id="suggestionsPanel" class="hidden bg-dark-800 rounded-lg p-4 mb-6 fade-in">
+            <div class="flex justify-between items-center mb-3">
+                <h3 class="font-medium">Suggestions intelligentes</h3>
+                <button id="closeSuggestions" class="text-gray-400 hover:text-white">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div id="suggestionsContent" class="space-y-2">
+                <!-- Suggestions will appear here -->
+            </div>
+        </div>
+        <!-- Generated Content -->
+        <div id="generatedContent" class="hidden bg-dark-800 rounded-lg p-4 mb-6 fade-in">
+            <div class="flex justify-between items-center mb-3">
+                <h3 class="font-medium">Contenu optimisé</h3>
+                <div class="flex space-x-2">
+                    <button id="copyAll" class="px-2 py-1 bg-dark-700 hover:bg-dark-600 rounded text-xs flex items-center space-x-1">
+                        <i class="fas fa-copy"></i>
+                        <span>Tout copier</span>
+                    </button>
+                    <button id="insertAll" class="px-2 py-1 bg-primary-500 hover:bg-primary-600 rounded text-xs flex items-center space-x-1">
+                        <i class="fas fa-plus"></i>
+                        <span>Insérer</span>
+                    </button>
+                </div>
+            </div>
+            <div id="generatedText" class="whitespace-pre-line">
+                <!-- Generated content will appear here -->
+            </div>
+        </div>
+        <!-- Status Bar -->
+        <div class="flex justify-between items-center text-sm text-gray-500">
+            <div>
+                <span id="charCount">0</span> caractères
+            </div>
+            <div class="flex space-x-4">
+                <button id="saveBtn" class="hover:text-gray-300 flex items-center space-x-1">
+                    <i class="fas fa-cloud"></i>
+                    <span>Sauvegarder</span>
+                </button>
+                <button id="exportBtn" class="hover:text-gray-300 flex items-center space-x-1">
+                    <i class="fas fa-share"></i>
+                    <span>Exporter</span>
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const noteEditor = document.getElementById('noteEditor');
+            const charCount = document.getElementById('charCount');
+            const suggestBtn = document.getElementById('suggestBtn');
+            const generateBtn = document.getElementById('generateBtn');
+            const suggestionsPanel = document.getElementById('suggestionsPanel');
+            const generatedContent = document.getElementById('generatedContent');
+            const generatedText = document.getElementById('generatedText');
+            const closeSuggestions = document.getElementById('closeSuggestions');
+            const copyAll = document.getElementById('copyAll');
+            const insertAll = document.getElementById('insertAll');
+            const searchBtn = document.getElementById('searchBtn');
+            const searchModal = document.getElementById('searchModal');
+            const closeSearch = document.getElementById('closeSearch');
+            const saveBtn = document.getElementById('saveBtn');
+            const exportBtn = document.getElementById('exportBtn');
+            // Update character count
+            noteEditor.addEventListener('input', function() {
+                charCount.textContent = noteEditor.textContent.length;
+            });
+            // Handle paste event to auto-detect and format title/description/hashtags
+            noteEditor.addEventListener('paste', function(e) {
+                e.preventDefault();
+                const text = (e.clipboardData || window.clipboardData).getData('text/plain');
+                // Process the pasted text to detect and format elements
+                setTimeout(() => {
+                    processPastedContent(text);
+                }, 10);
+            });
+            function cleanText(text) {
+                // Remove "Titre :", "Description :", "Hashtag :" and their variations
+                return text
+                    .replace(/^(Titre|titre)\s*:\s*/gmi, '')
+                    .replace(/^(Description|description)\s*:\s*/gmi, '')
+                    .replace(/^(Hashtag|hashtag|Mots-clés|mots-clés)\s*:\s*/gmi, '')
+                    .trim();
+            }
+            function processPastedContent(text) {
+                // Clean the text first
+                text = cleanText(text);
+                // Try to detect title, description and hashtags in various formats
+                let title = '';
+                let description = '';
+                let hashtags = '';
+                // Common pattern detection
+                if (text.includes('Titre:') || text.includes('titre:')) {
+                    const parts = text.split(/\n\s*\n/);
+                    parts.forEach(part => {
+                        if (part.match(/^(Titre|titre):/i)) {
+                            title = cleanText(part);
+                        } else if (part.match(/^(Description|description):/i)) {
+                            description = cleanText(part);
+                        } else if (part.match(/^(Hashtags|hashtags|Mots-clés|mots-clés):/i)) {
+                            hashtags = cleanText(part);
+                        }
+                    });
+                } else {
+                    // Try to split by empty lines
+                    const parts = text.split(/\n\s*\n/);
+                    if (parts.length >= 3) {
+                        title = cleanText(parts[0]);
+                        description = cleanText(parts[1]);
+                        hashtags = cleanText(parts[2]);
+                    } else if (parts.length === 2) {
+                        title = cleanText(parts[0]);
+                        description = cleanText(parts[1]);
+                    } else if (parts.length === 1) {
+                        description = cleanText(parts[0]);
+                    }
+                }
+                // Format the content with empty line separation
+                let formattedContent = '';
+                if (title) formattedContent += title + '\n\n';
+                if (description) formattedContent += description + '\n\n';
+                if (hashtags) {
+                    // Ensure hashtags start with #
+                    hashtags = hashtags.split(/\s+/).map(tag => {
+                        return tag.startsWith('#') ? tag : '#' + tag;
+                    }).join(' ');
+                    formattedContent += hashtags;
+                }
+                // Insert the formatted content
+                noteEditor.innerHTML = formattedContent;
+            }
+            // Generate optimized content
+            generateBtn.addEventListener('click', function() {
+                const content = noteEditor.textContent.trim();
+                if (!content) return;
+                // Simulate content generation (in a real app, this would use AI/NLP)
+                const generated = generateOptimizedContent(content);
+                generatedText.textContent = generated;
+                generatedContent.classList.remove('hidden');
+            });
+            function generateOptimizedContent(text) {
+                // Extract main ideas for title
+                const sentences = text.split(/[.!?]\s+/);
+                const firstSentence = sentences[0];
+                const keywords = extractKeywords(text);
+                // Generate title
+                let title = '';
+                if (firstSentence.length < 60) {
+                    title = firstSentence;
+                } else {
+                    title = keywords.slice(0, 3).join(' ') + '...';
+                }
+                // Generate description
+                let description = '';
+                if (sentences.length > 1) {
+                    description = sentences.slice(1).join('. ') + '.';
+                } else {
+                    description = firstSentence;
+                }
+                // Generate hashtags
+                let hashtags = keywords.slice(0, 5).map(word => '#' + word.toLowerCase()).join(' ');
+                // Format with empty lines between sections
+                return `${title}\n\n${description}\n\n${hashtags}`;
+            }
+            function extractKeywords(text) {
+                // Simple keyword extraction (in a real app, this would be more sophisticated)
+                const words = text.toLowerCase().split(/\s+/);
+                const commonWords = ['le', 'la', 'les', 'un', 'une', 'des', 'et', 'ou', 'mais', 'pour', 'dans', 'avec', 'sur', 'par'];
+                const wordCount = {};
+                words.forEach(word => {
+                    word = word.replace(/[^a-zéèêëàâùûîïôöç]/g, '');
+                    if (word.length > 3 && !commonWords.includes(word)) {
+                        wordCount[word] = (wordCount[word] || 0) + 1;
+                    }
+                });
+                return Object.entries(wordCount)
+                    .sort((a, b) => b[1] - a[1])
+                    .map(entry => entry[0]);
+            }
+            // Show suggestions
+            suggestBtn.addEventListener('click', function() {
+                const content = noteEditor.textContent.trim();
+                if (!content) return;
+                // Simulate intelligent suggestions
+                const suggestions = generateSuggestions(content);
+                displaySuggestions(suggestions);
+                suggestionsPanel.classList.remove('hidden');
+            });
+            function generateSuggestions(text) {
+                // Simulate suggestion generation based on content
+                const suggestions = [];
+                const keywords = extractKeywords(text);
+                if (keywords.length > 0) {
+                    suggestions.push({
+                        type: 'keywords',
+                        content: `Mots-clés pertinents: ${keywords.slice(0, 5).join(', ')}`
+                    });
+                    suggestions.push({
+                        type: 'hashtags',
+                        content: `Hashtags suggérés: ${keywords.slice(0, 5).map(k => '#' + k).join(' ')}`
+                    });
+                }
+                if (text.length > 100) {
+                    suggestions.push({
+                        type: 'summary',
+                        content: `Résumé possible: ${text.substring(0, 100)}...`
+                    });
+                }
+                // Add some generic suggestions
+                suggestions.push({
+                    type: 'question',
+                    content: "Pourriez-vous développer ce point davantage ?"
+                });
+                suggestions.push({
+                    type: 'example',
+                    content: "Un exemple concret pourrait renforcer votre argument."
+                });
+                return suggestions;
+            }
+            function displaySuggestions(suggestions) {
+                const container = document.getElementById('suggestionsContent');
+                container.innerHTML = '';
+                suggestions.forEach(suggestion => {
+                    const item = document.createElement('div');
+                    item.className = 'suggestion-item p-3 bg-dark-700 rounded-md cursor-pointer';
+                    item.innerHTML = `
+                        <div class="flex items-start">
+                            <div class="mt-1 mr-3 text-primary-500">
+                                ${getSuggestionIcon(suggestion.type)}
+                            </div>
+                            <div>${suggestion.content}</div>
+                        </div>
+                    `;
+                    item.addEventListener('click', () => {
+                        applySuggestion(suggestion);
+                    });
+                    container.appendChild(item);
+                });
+            }
+            function getSuggestionIcon(type) {
+                switch(type) {
+                    case 'keywords': return '<i class="fas fa-tags"></i>';
+                    case 'hashtags': return '<i class="fas fa-hashtag"></i>';
+                    case 'summary': return '<i class="fas fa-align-left"></i>';
+                    case 'question': return '<i class="fas fa-question-circle"></i>';
+                    case 'example': return '<i class="fas fa-lightbulb"></i>';
+                    default: return '<i class="fas fa-comment"></i>';
+                }
+            }
+            function applySuggestion(suggestion) {
+                // In a real app, this would be more sophisticated
+                const selection = window.getSelection();
+                if (!selection.rangeCount) return;
+                const range = selection.getRangeAt(0);
+                const node = document.createTextNode(suggestion.content + ' ');
+                range.insertNode(node);
+                // Move cursor to end of inserted text
+                range.setStartAfter(node);
+                range.setEndAfter(node);
+                selection.removeAllRanges();
+                selection.addRange(range);
+                suggestionsPanel.classList.add('hidden');
+            }
+            // Close suggestions panel
+            closeSuggestions.addEventListener('click', function() {
+                suggestionsPanel.classList.add('hidden');
+            });
+            // Copy all generated content
+            copyAll.addEventListener('click', function() {
+                navigator.clipboard.writeText(generatedText.textContent)
+                    .then(() => {
+                        const originalText = copyAll.innerHTML;
+                        copyAll.innerHTML = '<i class="fas fa-check"></i> <span>Copié</span>';
+                        setTimeout(() => {
+                            copyAll.innerHTML = originalText;
+                        }, 2000);
+                    });
+            });
+            // Insert all generated content
+            insertAll.addEventListener('click', function() {
+                noteEditor.innerHTML = generatedText.textContent;
+                generatedContent.classList.add('hidden');
+            });
+            // Search functionality
+            searchBtn.addEventListener('click', function() {
+                searchModal.classList.remove('hidden');
+            });
+            closeSearch.addEventListener('click', function() {
+                searchModal.classList.add('hidden');
+            });
+            // Save and export buttons (simulated)
+            saveBtn.addEventListener('click', function() {
+                alert('Note sauvegardée dans le cloud');
+            });
+            exportBtn.addEventListener('click', function() {
+                alert('Exportation vers les réseaux sociaux');
+            });
+        });
+        // Text formatting functions
+        function formatText(command, value = null) {
+            document.execCommand(command, false, value);
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Chasme/bloc-note" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>