Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Control Center</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #4361ee; | |
| --secondary-color: #3f37c9; | |
| --accent-color: #4cc9f0; | |
| --light-color: #f8f9fa; | |
| --dark-color: #212529; | |
| --success-color: #4bb543; | |
| --warning-color: #ffcc00; | |
| --danger-color: #f94144; | |
| --info-color: #4895ef; | |
| --purple-color: #8b5cf6; | |
| --pink-color: #f472b6; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: var(--dark-color); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| width: 100%; | |
| flex: 1; | |
| padding: 20px; | |
| } | |
| header { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| padding: 1.5rem 2rem; | |
| border-radius: 15px; | |
| margin-bottom: 2rem; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| header h1 { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .header-controls { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: center; | |
| } | |
| .anycoder-link { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| transition: all 0.3s; | |
| padding: 0.5rem 1rem; | |
| border-radius: 20px; | |
| background: rgba(67, 97, 238, 0.1); | |
| } | |
| .anycoder-link:hover { | |
| background: rgba(67, 97, 238, 0.2); | |
| } | |
| .main-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 2fr; | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .sidebar { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2rem; | |
| } | |
| .control-panel { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-radius: 15px; | |
| padding: 1.5rem; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| .control-panel h3 { | |
| margin-bottom: 1rem; | |
| color: var(--primary-color); | |
| font-size: 1.2rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .control-buttons { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .btn { | |
| padding: 0.8rem; | |
| border: none; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: all 0.3s; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(45deg, rgba(255,255,255,0.3), rgba(255,255,255,0)); | |
| transform: translateX(-100%); | |
| transition: transform 0.3s; | |
| } | |
| .btn:hover::before { | |
| transform: translateX(100%); | |
| } | |
| .btn-text { | |
| font-size: 0.8rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .btn-icon { | |
| font-size: 1.5rem; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| color: white; | |
| } | |
| .btn-success { | |
| background: linear-gradient(135deg, var(--success-color), #3daa35); | |
| color: white; | |
| } | |
| .btn-warning { | |
| background: linear-gradient(135deg, var(--warning-color), #e6b800); | |
| color: var(--dark-color); | |
| } | |
| .btn-danger { | |
| background: linear-gradient(135deg, var(--danger-color), #e32b2f); | |
| color: white; | |
| } | |
| .btn-info { | |
| background: linear-gradient(135deg, var(--info-color), #3a7bd5); | |
| color: white; | |
| } | |
| .btn-purple { | |
| background: linear-gradient(135deg, var(--purple-color), #7c3aed); | |
| color: white; | |
| } | |
| .btn-pink { | |
| background: linear-gradient(135deg, var(--pink-color), #ec4899); | |
| color: white; | |
| } | |
| .status-indicators { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: 1rem; | |
| } | |
| .status-item { | |
| text-align: center; | |
| } | |
| .status-value { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| } | |
| .status-label { | |
| font-size: 0.7rem; | |
| text-transform: uppercase; | |
| color: #666; | |
| margin-top: 0.2rem; | |
| } | |
| .main-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2rem; | |
| } | |
| .output-area { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-radius: 15px; | |
| padding: 1.5rem; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .output-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .output-tabs { | |
| display: flex; | |
| gap: 0.5rem; | |
| background: rgba(0, 0, 0, 0.05); | |
| padding: 0.2rem; | |
| border-radius: 10px; | |
| } | |
| .output-tab { | |
| padding: 0.5rem 1rem; | |
| border: none; | |
| background: transparent; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-weight: 500; | |
| transition: all 0.3s; | |
| font-size: 0.9rem; | |
| } | |
| .output-tab.active { | |
| background: var(--primary-color); | |
| color: white; | |
| } | |
| .output-content { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 1rem; | |
| background: rgba(0, 0, 0, 0.02); | |
| border-radius: 8px; | |
| min-height: 300px; | |
| } | |
| .code-editor { | |
| width: 100%; | |
| height: 100%; | |
| padding: 1rem; | |
| border: none; | |
| border-radius: 8px; | |
| font-family: 'Courier New', Courier, monospace; | |
| font-size: 0.9rem; | |
| resize: none; | |
| background: rgba(0, 0, 0, 0.05); | |
| color: var(--dark-color); | |
| } | |
| .code-editor:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.3); | |
| } | |
| .output-display { | |
| width: 100%; | |
| height: 100%; | |
| overflow-y: auto; | |
| padding: 1rem; | |
| } | |
| .media-preview { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100%; | |
| gap: 1rem; | |
| color: #666; | |
| } | |
| .media-preview i { | |
| font-size: 3rem; | |
| color: var(--primary-color); | |
| opacity: 0.5; | |
| } | |
| .settings-panel { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-radius: 15px; | |
| padding: 1.5rem; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| .settings-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| .setting-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .setting-label { | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| color: var(--primary-color); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .setting-input { | |
| padding: 0.6rem; | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| font-size: 0.9rem; | |
| transition: all 0.3s; | |
| } | |
| .setting-input:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2); | |
| } | |
| .slider-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .slider { | |
| flex: 1; | |
| } | |
| .slider-value { | |
| min-width: 40px; | |
| text-align: center; | |
| font-weight: 600; | |
| color: var(--primary-color); | |
| } | |
| .advanced-settings { | |
| margin-top: 1rem; | |
| padding-top: 1rem; | |
| border-top: 1px solid #eee; | |
| } | |
| .advanced-settings h4 { | |
| margin-bottom: 1rem; | |
| color: var(--primary-color); | |
| font-size: 1rem; | |
| } | |
| .toggle-switch { | |
| position: relative; | |
| display: inline-block; | |
| width: 50px; | |
| height: 24px; | |
| } | |
| .toggle-switch input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .slider-round { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: #ccc; | |
| transition: .4s; | |
| border-radius: 24px; | |
| } | |
| .slider-round:before { | |
| position: absolute; | |
| content: ""; | |
| height: 16px; | |
| width: 16px; | |
| left: 4px; | |
| bottom: 4px; | |
| background-color: white; | |
| transition: .4s; | |
| border-radius: 50%; | |
| } | |
| input:checked + .slider-round { | |
| background-color: var(--primary-color); | |
| } | |
| input:checked + .slider-round:before { | |
| transform: translateX(26px); | |
| } | |
| .history-panel { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-radius: 15px; | |
| padding: 1.5rem; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| .history-list { | |
| list-style: none; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| .history-item { | |
| padding: 0.8rem; | |
| background: rgba(0, 0, 0, 0.03); | |
| border-radius: 8px; | |
| border-left: 4px solid var(--primary-color); | |
| transition: all 0.3s; | |
| cursor: pointer; | |
| } | |
| .history-item:hover { | |
| background: rgba(0, 0, 0, 0.05); | |
| transform: translateX(5px); | |
| } | |
| .history-item.active { | |
| background: rgba(67, 97, 238, 0.1); | |
| border-left-color: var(--success-color); | |
| } | |
| .history-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 0.5rem; | |
| } | |
| .history-title { | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| } | |
| .history-time { | |
| font-size: 0.7rem; | |
| color: #666; | |
| } | |
| .history-content { | |
| font-size: 0.8rem; | |
| color: #555; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| z-index: 1000; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| backdrop-filter: blur(5px); | |
| } | |
| .modal-content { | |
| background-color: white; | |
| margin: 5% auto; | |
| padding: 2rem; | |
| border-radius: 15px; | |
| width: 90%; | |
| max-width: 800px; | |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); | |
| transform: translateY(-20px); | |
| opacity: 0; | |
| transition: all 0.3s; | |
| } | |
| .modal-content.active { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| padding-bottom: 1rem; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .modal-title { | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| color: var(--primary-color); | |
| } | |
| .close-modal { | |
| background: none; | |
| border: none; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| color: #666; | |
| transition: color 0.3s; | |
| } | |
| .close-modal:hover { | |
| color: var(--danger-color); | |
| } | |
| .modal-body { | |
| margin-bottom: 1.5rem; | |
| } | |
| .modal-footer { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 1rem; | |
| } | |
| @media (max-width: 1024px) { | |
| .main-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .sidebar { | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| } | |
| .control-panel { | |
| flex: 1; | |
| min-width: 300px; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| header { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .header-controls { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .control-buttons { | |
| grid-template-columns: 1fr; | |
| } | |
| .output-tabs { | |
| flex-wrap: wrap; | |
| } | |
| .settings-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Animation for buttons */ | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .btn.active { | |
| animation: pulse 1.5s infinite; | |
| box-shadow: 0 0 0 10px rgba(67, 97, 238, 0.2); | |
| } | |
| /* Loading spinner */ | |
| .loading-spinner { | |
| display: inline-block; | |
| width: 20px; | |
| height: 20px; | |
| border: 3px solid rgba(255,255,255,.3); | |
| border-radius: 50%; | |
| border-top-color: white; | |
| animation: spin 1s ease-in-out infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Tooltip */ | |
| .tooltip { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .tooltip .tooltiptext { | |
| visibility: hidden; | |
| width: 200px; | |
| background-color: #555; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 0.5rem; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -100px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| font-size: 0.8rem; | |
| } | |
| .tooltip:hover .tooltiptext { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1> | |
| <i class="fas fa-robot"></i> | |
| AI Control Center | |
| </h1> | |
| <div class="header-controls"> | |
| <button class="btn btn-info" id="settings-btn"> | |
| <i class="fas fa-cog"></i> | |
| <span class="btn-text">Settings</span> | |
| </button> | |
| <button class="btn btn-warning" id="history-btn"> | |
| <i class="fas fa-history"></i> | |
| <span class="btn-text">History</span> | |
| </button> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank"> | |
| <i class="fas fa-code"></i> Built with anycoder | |
| </a> | |
| </div> | |
| </header> | |
| <div class="main-grid"> | |
| <div class="sidebar"> | |
| <div class="control-panel"> | |
| <h3> | |
| <i class="fas fa-play-circle"></i> | |
| Content Generation | |
| </h3> | |
| <div class="control-buttons"> | |
| <button class="btn btn-primary tooltip" id="generate-text-btn"> | |
| <i class="fas fa-font btn-icon"></i> | |
| <span class="btn-text">Text</span> | |
| <span class="tooltiptext">Generate AI-powered text content</span> | |
| </button> | |
| <button class="btn btn-success tooltip" id="generate-image-btn"> | |
| <i class="fas fa-image btn-icon"></i> | |
| <span class="btn-text">Image</span> | |
| <span class="tooltiptext">Create images from descriptions</span> | |
| </button> | |
| <button class="btn btn-danger tooltip" id="generate-video-btn"> | |
| <i class="fas fa-video btn-icon"></i> | |
| <span class="btn-text">Video</span> | |
| <span class="tooltiptext">Generate video content</span> | |
| </button> | |
| <button class="btn btn-info tooltip" id="analyze-code-btn"> | |
| <i class="fas fa-code btn-icon"></i> | |
| <span class="btn-text">Code</span> | |
| <span class="tooltiptext">Analyze and understand code</span> | |
| </button> | |
| </div> | |
| <div class="status-indicators"> | |
| <div class="status-item"> | |
| <div class="status-value" id="text-count">0</div> | |
| <div class="status-label">Text</div> | |
| </div> | |
| <div class="status-item"> | |
| <div class="status-value" id="image-count">0</div> | |
| <div class="status-label">Images</div> | |
| </div> | |
| <div class="status-item"> | |
| <div class="status-value" id="video-count">0</div> | |
| <div class="status-label">Videos</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="control-panel"> | |
| <h3> | |
| <i class="fas fa-cogs"></i> | |
| AI Functions | |
| </h3> | |
| <div class="control-buttons"> | |
| <button class="btn btn-purple tooltip" id="translate-btn"> | |
| <i class="fas fa-language btn-icon"></i> | |
| <span class="btn-text">Translate</span> | |
| <span class="tooltiptext">Translate text between languages</span> | |
| </button> | |
| <button class="btn btn-pink tooltip" id="summarize-btn"> | |
| <i class="fas fa-compress btn-icon"></i> | |
| <span class="btn-text">Summarize</span> | |
| <span class="tooltiptext">Create concise summaries</span> | |
| </button> | |
| <button class="btn btn-warning tooltip" id="explain-btn"> | |
| <i class="fas fa-lightbulb btn-icon"></i> | |
| <span class="btn-text">Explain</span> | |
| <span class="tooltiptext">Explain complex concepts</span> | |
| </button> | |
| <button class="btn btn-info tooltip" id="optimize-btn"> | |
| <i class="fas fa-magic btn-icon"></i> | |
| <span class="btn-text">Optimize</span> | |
| <span class="tooltiptext">Optimize content for SEO</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="main-content"> | |
| <div class="output-area"> | |
| <div class="output-header"> | |
| <div class="output-tabs"> | |
| <button class="output-tab active" data-tab="editor">Editor</button> | |
| <button class="output-tab" data-tab="preview">Preview</button> | |
| <button class="output-tab" data-tab="code">Code</button> | |
| <button class="output-tab" data-tab="analysis">Analysis</button> | |
| </div> | |
| <div> | |
| <button class="btn btn-primary" id="execute-btn"> | |
| <i class="fas fa-play"></i> Execute | |
| </button> | |
| <button class="btn btn-secondary" id="clear-btn"> | |
| <i class="fas fa-eraser"></i> Clear | |
| </button> | |
| </div> | |
| </div> | |
| <div class="output-content"> | |
| <textarea class="code-editor" id="main-editor" placeholder="Enter your prompt or code here..."></textarea> | |
| <div class="output-display" id="output-display" style="display: none;"> | |
| <div class="media-preview"> | |
| <i class="fas fa-eye"></i> | |
| <div>Preview will appear here</div> | |
| </div> | |
| </div> | |
| <div class="code-analysis" id="code-analysis" style="display: none;"> | |
| <div class="analysis-content"> | |
| <h3>Code Analysis</h3> | |
| <p>Detailed analysis will appear here when you analyze code.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="settings-panel" id="settings-panel" style="display: none;"> | |
| <h3> | |
| <i class="fas fa-sliders-h"></i> | |
| Generation Settings | |
| </h3> | |
| <div class="settings-grid"> | |
| <div class="setting-item"> | |
| <label class="setting-label">Model</label> | |
| <select class="setting-input" id="model-select"> | |
| <option value="gpt-4">GPT-4</option> | |
| <option value="gpt-3.5">GPT-3.5</option> | |
| <option value="dall-e-3">DALL·E 3</option> | |
| <option value="stable-diffusion">Stable Diffusion</option> | |
| <option value="whisper">Whisper</option> | |
| </select> | |
| </div> | |
| <div class="setting-item"> | |
| <label class="setting-label">Temperature</label> | |
| <div class="slider-container"> | |
| <input type="range" class="slider" id="temperature-slider" min="0" max="1" step="0.1" value="0.7"> | |
| <span class="slider-value" id="temperature-value">0.7</span> | |
| </div> | |
| </div> | |
| <div class="setting-item"> | |
| <label class="setting-label">Max Length</label> | |
| <div class="slider-container"> | |
| <input type="range" class="slider" id="max-length-slider" min="50" max="2000" step="50" value="500"> | |
| <span class="slider-value" id="max-length-value">500</span> | |
| </div> | |
| </div> | |
| <div class="setting-item"> | |
| <label class="setting-label">Quality</label> | |
| <select class="setting-input" id="quality-select"> | |
| <option value="standard">Standard</option> | |
| <option value="high">High</option> | |
| <option value="hd">HD</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="advanced-settings"> | |
| <h4>Advanced Options</h4> | |
| <div class="setting-item"> | |
| <label class="setting-label">Enable Code Understanding</label> | |
| <label class="toggle-switch"> | |
| <input type="checkbox" id="code-understanding-toggle" checked> | |
| <span class="slider-round"></span> | |
| </label> | |
| </div> | |
| <div class="setting-item"> | |
| <label class="setting-label">Real-time Preview</label> | |
| <label class="toggle-switch"> | |
| <input type="checkbox" id="realtime-preview-toggle"> | |
| <span class="slider-round"></span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="history-panel" id="history-panel" style="display: none;"> | |
| <h3> | |
| <i class="fas fa-clock"></i> | |
| Generation History | |
| </h3> | |
| <div class="history-list" id="history-list"> | |
| <!-- History items will be added dynamically --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Modal for additional options --> | |
| <div id="options-modal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2 class="modal-title" id="modal-title">Additional Options</h2> | |
| <button class="close-modal" id="close-modal">×</button> | |
| </div> | |
| <div class="modal-body" id="modal-body"> | |
| <!-- Content will be loaded dynamically --> | |
| </div> | |
| <div class="modal-footer"> | |
| <button class="btn btn-secondary" id="cancel-modal">Cancel</button> | |
| <button class="btn btn-primary" id="confirm-modal">Confirm</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // DOM Elements | |
| const generateTextBtn = document.getElementById('generate-text-btn'); | |
| const generateImageBtn = document.getElementById('generate-image-btn'); | |
| const generateVideoBtn = document.getElementById('generate-video-btn'); | |
| const analyzeCodeBtn = document.getElementById('analyze-code-btn'); | |
| const translateBtn = document.getElementById('translate-btn'); | |
| const summarizeBtn = document.getElementById('summarize-btn'); | |
| const explainBtn = document.getElementById('explain-btn'); | |
| const optimizeBtn = document.getElementById('optimize-btn'); | |
| const settingsBtn = document.getElementById('settings-btn'); | |
| const historyBtn = document.getElementById('history-btn'); | |
| const executeBtn = document.getElementById('execute-btn'); | |
| const clearBtn = document.getElementById('clear-btn'); | |
| const settingsPanel = document.getElementById('settings-panel'); | |
| const historyPanel = document.getElementById('history-panel'); | |
| const mainEditor = document.getElementById('main-editor'); | |
| const outputDisplay = document.getElementById('output-display'); | |
| const codeAnalysis = document.getElementById('code-analysis'); | |
| const outputTabs = document.querySelectorAll('.output-tab'); | |
| const historyList = document.getElementById('history-list'); | |
| const modal = document.getElementById('options-modal'); | |
| const modalTitle = document.getElementById('modal-title'); | |
| const modalBody = document.getElementById('modal-body'); | |
| const closeModal = document.getElementById('close-modal'); | |
| const cancelModal = document.getElementById('cancel-modal'); | |
| const confirmModal = document.getElementById('confirm-modal'); | |
| // Sliders | |
| const temperatureSlider = document.getElementById('temperature-slider'); | |
| const temperatureValue = document.getElementById('temperature-value'); | |
| const maxLengthSlider = document.getElementById('max-length-slider'); | |
| const maxLengthValue = document.getElementById('max-length-value'); | |
| // Counters | |
| let textCount = 0; | |
| let imageCount = 0; | |
| let videoCount = 0; | |
| // Current active tab | |
| let currentTab = 'editor'; | |
| // Initialize the application | |
| init(); | |
| function init() { | |
| // Set up event listeners | |
| setupEventListeners(); | |
| // Initialize sliders | |
| initSliders(); | |
| // Load any saved history | |
| loadHistory(); | |
| } | |
| function setupEventListeners() { | |
| // Generation buttons | |
| generateTextBtn.addEventListener('click', () => handleGeneration('text')); | |
| generateImageBtn.addEventListener('click', () => handleGeneration('image')); | |
| generateVideoBtn.addEventListener('click', () => handleGeneration('video')); | |
| analyzeCodeBtn.addEventListener('click', () => handleGeneration('code')); | |
| // Function buttons | |
| translateBtn.addEventListener('click', () => showFunctionModal('translate')); | |
| summarizeBtn.addEventListener('click', () => showFunctionModal('summarize')); | |
| explainBtn.addEventListener('click', () => showFunctionModal('explain')); | |
| optimizeBtn.addEventListener('click', () => showFunctionModal('optimize')); | |
| // Panel toggles | |
| settingsBtn.addEventListener('click', toggleSettingsPanel); | |
| historyBtn.addEventListener('click', toggleHistoryPanel); | |
| // Output tabs | |
| outputTabs.forEach(tab => { | |
| tab.addEventListener('click', () => switchOutputTab(tab.dataset.tab)); | |
| }); | |
| // Action buttons | |
| executeBtn.addEventListener('click', executeAction); | |
| clearBtn.addEventListener('click', clearOutput); | |
| // Modal controls | |
| closeModal.addEventListener('click', closeOptionsModal); | |
| cancelModal.addEventListener('click', closeOptionsModal); | |
| confirmModal.addEventListener('click', confirmModalAction); | |
| } | |
| function initSliders() { | |
| // Temperature slider | |
| temperatureSlider.addEventListener('input', function() { | |
| temperatureValue.textContent = this.value; | |
| }); | |
| // Max length slider | |
| maxLengthSlider.addEventListener('input', function() { | |
| maxLengthValue.textContent = this.value; | |
| }); | |
| } | |
| function handleGeneration(type) { | |
| // Highlight the active button | |
| resetButtonStates(); | |
| let activeBtn; | |
| switch(type) { | |
| case 'text': | |
| activeBtn = generateTextBtn; | |
| break; | |
| case 'image': | |
| activeBtn = generateImageBtn; | |
| break; | |
| case 'video': | |
| activeBtn = generateVideoBtn; | |
| break; | |
| case 'code': | |
| activeBtn = analyzeCodeBtn; | |
| break; | |
| } | |
| activeBtn.classList.add('active'); | |
| // Set appropriate placeholder | |
| switch(type) { | |
| case 'text': | |
| mainEditor.placeholder = "Enter your text prompt here (e.g., 'Write a poem about autumn')"; | |
| break; | |
| case 'image': | |
| mainEditor.placeholder = "Describe the image you want to generate (e.g., 'A futuristic city at sunset')"; | |
| break; | |
| case 'video': | |
| mainEditor.placeholder = "Describe the video concept (e.g., 'A 30-second animation of a robot dancing')"; | |
| break; | |
| case 'code': | |
| mainEditor.placeholder = "Paste your code here for analysis or enter a coding task"; | |
| break; | |
| } | |
| // Switch to editor tab | |
| switchOutputTab('editor'); | |
| } | |
| function showFunctionModal(functionType) { | |
| let title, content; | |
| switch(functionType) { | |
| case 'translate': | |
| title = 'Translation Options'; | |
| content = ` | |
| <div class="setting-item"> | |
| <label class="setting-label">Source Language</label> | |
| <select class="setting-input"> | |
| <option value="auto">Auto Detect</option> | |
| <option value="en">English</option> | |
| <option value="es">Spanish</option> | |
| <option value="fr">French</option> | |
| <option value="de">German</option> | |
| <option value="zh">Chinese</option> | |
| </select> | |
| </div> | |
| <div class="setting-item"> | |
| <label class="setting-label">Target Language</label> | |
| <select class="setting-input"> | |
| <option value="en">English</option> | |
| <option value="es">Spanish</option> | |
| <option value="fr">French</option> | |
| <option value="de">German</option> | |
| <option value="zh">Chinese</option> | |
| </select> | |
| </div> | |
| <div class="setting-item"> | |
| <label class="setting-label">Formality</label> | |
| <select class="setting-input"> | |
| <option value="default">Default</option> | |
| <option value="formal">Formal</option> | |
| <option value="informal">Informal</option> | |
| </select> | |
| </div> | |
| `; | |
| break; | |
| case 'summarize': | |
| title = 'Summarization Options'; | |
| content = ` | |
| <div class="setting-item"> | |
| <label class="setting-label">Summary Length</label> | |
| <select class="setting-input"> | |
| <option value="short">Short (1-2 sentences)</option> | |
| <option value="medium">Medium (paragraph)</option> | |
| <option value="long">Long (detailed)</option> | |
| </select> | |
| </div> | |
| <div class="setting-item"> | |
| <label class="setting-label">Focus</label> | |
| <select class="setting-input"> | |
| <option value="key-points">Key Points</option> | |
| <option value="bullet-points">Bullet Points</option> | |
| <option value="paragraph">Paragraph</option> | |
| </select> | |
| </div> | |
| `; | |
| break; | |
| case 'explain': | |
| title = 'Explanation Options'; | |
| content = ` | |
| <div class="setting-item"> | |
| <label class="setting-label">Explanation Level</label> | |
| <select class="setting-input"> | |
| <option value="basic">Basic</option> | |
| <option value="intermediate">Intermediate</option> | |
| <option value="advanced">Advanced</option> | |
| </select> | |
| </div> | |
| <div class="setting-item"> | |
| <label class="setting-label">Format</label> | |
| <select class="setting-input"> | |
| <option value="paragraph">Paragraph</option> | |
| <option value="steps">Step-by-step</option> | |
| <option value="analogy">With analogy</option> | |
| </select> | |
| </div> | |
| `; | |
| break; | |
| case 'optimize': | |
| title = 'Optimization Options'; | |
| content = ` | |
| <div class="setting-item"> | |
| <label class="setting-label">Optimize For</label> | |
| <select class="setting-input"> | |
| <option value="seo">SEO</option> | |
| <option value="readability">Readability</option> | |
| <option value="engagement">Engagement</option> | |
| <option value="clarity">Clarity</option> | |
| </select> | |
| </div> | |
| <div class="setting-item"> | |
| <label class="setting-label">Tone</label> | |
| <select class="setting-input"> | |
| <option value="neutral">Neutral</option> | |
| <option value="professional">Professional</option> | |
| <option value="friendly">Friendly</option> | |
| <option value="persuasive">Persuasive</option> | |
| </select> | |
| </div> | |
| `; | |
| break; | |
| } | |
| modalTitle.textContent = title; | |
| modalBody.innerHTML = content; | |
| modal.style.display = 'block'; | |
| // Add active class after a short delay for animation | |
| setTimeout(() => { | |
| document.querySelector('.modal-content').classList.add('active'); | |
| }, 10); | |
| } | |
| function closeOptionsModal() { | |
| document.querySelector('.modal-content').classList.remove('active'); | |
| // Hide modal after animation completes | |
| setTimeout(() => { | |
| modal.style.display = 'none'; | |
| }, 300); | |
| } | |
| function confirmModalAction() { | |
| // Get selected options from modal | |
| const selects = modalBody.querySelectorAll('select'); | |
| let options = {}; | |
| selects.forEach(select => { | |
| options[select.previousElementSibling.textContent.trim()] = select.value; | |
| }); | |
| // For demo purposes, just show what was selected | |
| showNotification(`Options applied: ${JSON.stringify(options)}`, 'success'); | |
| closeOptionsModal(); | |
| } | |
| function toggleSettingsPanel() { | |
| settingsPanel.style.display = settingsPanel.style.display === 'none' ? 'block' : 'none'; | |
| settingsBtn.classList.toggle('active'); | |
| } | |
| function toggleHistoryPanel() { | |
| historyPanel.style.display = historyPanel.style.display === 'none' ? 'block' : 'none'; | |
| historyBtn.classList.toggle('active'); | |
| if (historyPanel.style.display === 'block') { | |
| loadHistory(); | |
| } | |
| } | |
| function switchOutputTab(tab) { | |
| currentTab = tab; | |
| // Update tab buttons | |
| outputTabs.forEach(t => t.classList.remove('active')); | |
| document.querySelector(`.output-tab[data-tab="${tab}"]`).classList.add('active'); | |
| // Show/hide content | |
| mainEditor.style.display = tab === 'editor' ? 'block' : 'none'; | |
| outputDisplay.style.display = tab === 'preview' ? 'block' : 'none'; | |
| codeAnalysis.style.display = tab === 'analysis' ? 'block' : 'none'; | |
| // For code tab, we'll use the editor but with syntax highlighting | |
| if (tab === 'code') { | |
| mainEditor.style.display = 'block'; | |
| // In a real app, we'd enable syntax highlighting here | |
| } | |
| } | |
| function executeAction() { | |
| const content = mainEditor.value.trim(); | |
| if (!content) { | |
| showNotification('Please enter some content first', 'warning'); | |
| return; | |
| } | |
| // Simulate processing | |
| executeBtn.disabled = true; | |
| executeBtn.innerHTML = '<span class="loading-spinner"></span> Processing...'; | |
| // Simulate different actions based on current state | |
| setTimeout(() => { | |
| const activeBtn = document.querySelector('.btn.active'); | |
| if (activeBtn) { | |
| const action = activeBtn.id.replace('-btn', ''); | |
| switch(action) { | |
| case 'generate-text': | |
| generateTextContent(content); | |
| break; | |
| case 'generate-image': | |
| generateImageContent(content); | |
| break; | |
| case 'generate-video': | |
| generateVideoContent(content); | |
| break; | |
| case 'analyze-code': | |
| analyzeCodeContent(content); | |
| break; | |
| default: | |
| showNotification('Please select a generation type first', 'warning'); | |
| } | |
| } else { | |
| showNotification('Please select a generation type first', 'warning'); | |
| } | |
| executeBtn.disabled = false; | |
| executeBtn.innerHTML = '<i class="fas fa-play"></i> Execute'; | |
| }, 1500); | |
| } | |
| function generateTextContent(prompt) { | |
| // Simulate text generation | |
| const generatedText = `Generated content based on: "${prompt}"\n\nThis is a sample response from the AI model. In a real application, this would be actual generated content based on your prompt. The system would use the selected model and parameters to create relevant, coherent text that matches your request. | |
| For example, if you asked for a poem about autumn, you would receive an actual poem here. If you requested a product description, you would get a well-written description suitable for e-commerce. | |
| The length and style of the response would be controlled by the settings you've configured in the settings panel.`; | |
| // Update counters | |
| textCount++; | |
| document.getElementById('text-count').textContent = textCount; | |
| // Show in preview | |
| switchOutputTab('preview'); | |
| outputDisplay.innerHTML = ` | |
| <div class="generated-content"> | |
| <h3>Generated Text</h3> | |
| <div class="content-text">${generatedText}</div> | |
| <div class="content-meta"> | |
| <span>Model: GPT-4</span> | | |
| <span>Tokens: 150</span> | | |
| <span>Time: 2.3s</span> | |
| </div> | |
| </div> | |
| `; | |
| // Add to history | |
| addToHistory('Text Generation', prompt.substring(0, 50) + '...'); | |
| } | |
| function generateImageContent(prompt) { | |
| // Simulate image generation | |
| const imageUrl = 'https://source.unsplash.com/random/800x600/?' + encodeURIComponent(prompt); | |
| // Update counters | |
| imageCount++; | |
| document.getElementById('image-count').textContent = imageCount; | |
| // Show in preview | |
| switchOutputTab('preview'); | |
| outputDisplay.innerHTML = ` | |
| <div class="generated-content"> | |
| <h3>Generated Image</h3> | |
| <div class="image-preview"> | |
| <img src="${imageUrl}" alt="Generated image" style="max-width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);"> | |
| </div> | |
| <div class="content-meta"> | |
| <span>Model: DALL·E 3</span> | | |
| <span>Resolution: 1024x1024</span> | | |
| <span>Time: 8.1s</span> | |
| </div> | |
| <div class="prompt-used"> | |
| <strong>Prompt:</strong> ${prompt} | |
| </div> | |
| </div> |