Spaces:
Configuration error
Configuration error
File size: 5,683 Bytes
298575c 2069289 298575c 6b42561 298575c 8be40d5 298575c ae58435 ce8bf77 ff0e7f9 ce8bf77 ff0e7f9 8be40d5 ff0e7f9 298575c ff0e7f9 298575c ff0e7f9 298575c 8be40d5 ff0e7f9 8be40d5 298575c 8be40d5 298575c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | class CustomCodePreview extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
width: 100%;
height: 100vh;
background: white;
padding: 1.5rem;
overflow-y: auto;
}
.tabs {
display: flex;
border-bottom: 1px solid #e2e8f0;
margin-bottom: 1.5rem;
}
.tab {
padding: 0.5rem 1rem;
cursor: pointer;
color: #64748b;
border-bottom: 2px solid transparent;
}
.tab.active {
color: #1e40af;
border-bottom-color: #1e40af;
}
.code-area {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 1rem;
font-family: monospace;
white-space: pre;
overflow-x: auto;
margin-bottom: 1rem;
}
.final-result {
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid #e2e8f0;
}
.result-title {
font-weight: 600;
margin-bottom: 1rem;
color: #1e293b;
}
.export-options {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
}
.export-button {
background: #e0f2fe;
color: #0369a1;
border: none;
border-radius: 0.5rem;
padding: 0.5rem 1rem;
cursor: pointer;
font-size: 0.875rem;
}
</style>
<div class="tabs">
<div class="tab active">[ APERÇU ]</div>
<div class="tab">[ CODES ]</div>
<div class="tab">[ PARAMÈTRES ]</div>
<div class="tab">[ PUBLIER ]</div>
</div>
<div class="code-scroll-title">### ️ DÉFILEMENT DES CODES – ESPACE CODAGE INDÉPENDANT</div>
<div class="code-area">
<div class="code-line">▸ // Connexion à DeepSite</div>
<div class="code-line">const deepSite = new DeepSiteAPI({</div>
<div class="code-line"> user: "vous",</div>
<div class="code-line"> collaboration: "ESPACE CODAGE",</div>
<div class="code-line"> ia: "ROSALINDA"</div>
<div class="code-line">});</div>
<div class="code-line"></div>
<div class="code-line">▸ // Génération vidéo avec ROSALINDA</div>
<div class="code-line">async function genererAvecRosalinda() {</div>
<div class="code-line"> const video = await rosalinda.genererVideo({</div>
<div class="code-line"> format: "mp4",</div>
<div class="code-line"> durée: "60s",</div>
<div class="code-line"> style: "professionnel",</div>
<div class="code-line"> musique: true,</div>
<div class="code-line"> sousTitres: "français"</div>
<div class="code-line"> });</div>
<div class="code-line"> return video;</div>
<div class="code-line">}</div>
<div class="code-line"></div>
<div class="code-line">▸ // Fonction de génération vidéo</div>
<div class="code-line">function genererVideo(contenu, parametres) {</div>
<div class="code-line"> const ffmpeg = new FFmpeg();</div>
<div class="code-line"> ffmpeg.charger(contenu);</div>
<div class="code-line"> ffmpeg.appliquer(parametres);</div>
<div class="code-line"> return ffmpeg.exporter();</div>
<div class="code-line">}</div>
<div class="code-line"></div>
<div class="code-line">▸ // Interface utilisateur</div>
<div class="code-line">class InterfaceEspaceCodage {</div>
<div class="code-line"> constructor() {</div>
<div class="code-line"> this.colonnes = 3;</div>
<div class="code-line"> this.microphone = true;</div>
<div class="code-line"> this.trombone = true;</div>
<div class="code-line"> this.ia = "Rosalinda";</div>
<div class="code-line"> }</div>
<div class="code-line">}</div>
<div class="code-line"></div>
<div class="code-line">... [les codes continuent de défiler] ...</div>
</div>
<div class="status">✅ FIN DE GÉNÉRATION - ROSALINDA A TERMINÉ</div>
<div class="final-result">
<div class="result-title">📦 <strong>RÉSULTAT FINAL PRÊT :</strong></div>
<div>• Vidéo générée : marketing_espace_codage.mp4</div>
<div>• Images créées : 12 thumbnails optimisés</div>
<div>• Thème appliqué : Professionnel - Bleu/Nuit</div>
<div>• Code complet exporté</div>
<div class="export-options">
<button class="export-button">📥 Télécharger</button>
<button class="export-button">📋 Copier</button>
<button class="export-button">↗ Partager</button>
</div>
<div class="features">
<div class="features-title">Fonctionnalités clés de ROSALINDA :</div>
<div>• Génération vidéo complète avec FFmpeg</div>
<div>• Création d'images et thumbnails optimisées</div>
<div>• Design de thèmes professionnels personnalisables</div>
<div>• Interface conversationnelle intuitive</div>
<div>• Export multi-format (MP4, GIF, WebM)</div>
</div>
<div class="integration-note">
ROSALINDA est maintenant intégrée à Espace Codage et prête à générer vos vidéos, images et thèmes avec une interface en 3 colonnes parfaitement organisée.
</div>
</div>
`;
}
}
customElements.define('custom-code-preview', CustomCodePreview); |