Spaces:
Running
Running
| body { | |
| font-family: 'Inter', sans-serif; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 20px; | |
| background: linear-gradient(135deg, #e0e4eb 0%, #a1a9b7 100%); | |
| color: #2c3e50; | |
| } | |
| .technical-info { | |
| display: flex; | |
| justify-content: space-around; | |
| width: 100%; | |
| margin-bottom: 20px; | |
| background: rgba(255, 255, 255, 0.1); | |
| padding: 15px; | |
| border-radius: 10px; | |
| } | |
| .component { | |
| text-align: center; | |
| background: rgba(255, 255, 255, 0.2); | |
| padding: 10px; | |
| border-radius: 8px; | |
| transition: transform 0.3s ease; | |
| } | |
| .component:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| .component h3 { | |
| margin: 0 0 10px; | |
| color: #2980b9; | |
| } | |
| .component p { | |
| font-size: 0.9rem; | |
| color: #34495e; | |
| } | |
| h1 { | |
| color: #2c3e50; | |
| margin-bottom: 30px; | |
| text-align: center; | |
| } | |
| .input-area { | |
| background: rgba(255, 255, 255, 0.3); | |
| border-radius: 15px; | |
| padding: 25px; | |
| width: 100%; | |
| max-width: 700px; | |
| box-shadow: 0 15px 35px rgba(0,0,0,0.1); | |
| } | |
| .prompt-group { | |
| margin-bottom: 15px; | |
| } | |
| input { | |
| width: 100%; | |
| padding: 12px; | |
| border: 1px solid #bdc3c7; | |
| border-radius: 6px; | |
| font-size: 1rem; | |
| } | |
| #generateButton { | |
| width: 100%; | |
| padding: 12px; | |
| background: linear-gradient(135deg, #2980b9 0%, #2c3e50 100%); | |
| color: white; | |
| border: none; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| transition: all 0.4s ease; | |
| } | |
| #generateButton:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 7px 14px rgba(0,0,0,0.2); | |
| } | |
| .image-area { | |
| margin-top: 20px; | |
| max-width: 100%; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.1); | |
| } | |
| #generatedImage { | |
| max-width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| #loading { | |
| margin: 20px 0; | |
| font-style: italic; | |
| color: #2c3e50; | |
| } | |
| .advanced-controls, .control-options { | |
| background: rgba(255, 255, 255, 0.2); | |
| padding: 15px; | |
| border-radius: 10px; | |
| margin-bottom: 15px; | |
| } | |
| .style-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 10px; | |
| background: rgba(255, 255, 255, 0.1); | |
| padding: 15px; | |
| border-radius: 10px; | |
| } | |
| .style-item { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .style-item select { | |
| width: 100%; | |
| padding: 8px; | |
| border-radius: 6px; | |
| border: 1px solid #bdc3c7; | |
| } | |
| .prompt-hint { | |
| font-size: 0.7rem; | |
| color: #7f8c8d; | |
| margin-top: 5px; | |
| } | |
| .technical-explanation { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 10px; | |
| padding: 20px; | |
| margin-top: 20px; | |
| text-align: left; | |
| max-width: 700px; | |
| width: 100%; | |
| } | |
| .technical-explanation h2 { | |
| color: #2980b9; | |
| margin-bottom: 15px; | |
| } | |
| .technical-explanation ul { | |
| list-style-type: none; | |
| padding: 0; | |
| } | |
| .technical-explanation li { | |
| margin-bottom: 8px; | |
| padding-left: 20px; | |
| position: relative; | |
| background: rgba(255, 255, 255, 0.1); | |
| padding: 8px; | |
| border-radius: 6px; | |
| } | |
| .technical-explanation li::before { | |
| content: '•'; | |
| position: absolute; | |
| left: 0; | |
| color: #2980b9; | |
| } | |
| .diffusion-stages { | |
| display: flex; | |
| justify-content: space-around; | |
| background: rgba(41, 128, 185, 0.1); | |
| padding: 15px; | |
| border-radius: 10px; | |
| } | |
| .noise-generation, .denoising-process, .prompt-guidance { | |
| text-align: center; | |
| background: rgba(255, 255, 255, 0.2); | |
| padding: 10px; | |
| border-radius: 8px; | |
| transition: all 0.3s ease; | |
| } | |
| .noise-generation:hover, .denoising-process:hover, .prompt-guidance:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| .diffusion-details { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| background: rgba(255, 255, 255, 0.1); | |
| padding: 15px; | |
| border-radius: 10px; | |
| margin-top: 15px; | |
| } | |
| .stage-visualization ul, .generation-parameters ul, .how-it-works ul { | |
| list-style-type: none; | |
| padding: 0; | |
| } | |
| .stage-visualization li { | |
| background: rgba(255, 255, 255, 0.2); | |
| margin-bottom: 8px; | |
| padding: 8px; | |
| border-radius: 6px; | |
| } | |
| .stage-visualization li strong, .generation-parameters li strong { | |
| color: #2c3e50; | |
| } | |
| .stage-visualization li::before, .generation-parameters li::before { | |
| content: ''; | |
| } | |
| .generation-parameters li { | |
| margin-bottom: 8px; | |
| background: rgba(41, 128, 185, 0.1); | |
| padding: 8px; | |
| border-radius: 6px; | |
| } | |
| .anatomical-guidance { | |
| background: rgba(41, 185, 128, 0.1); | |
| border-radius: 10px; | |
| padding: 15px; | |
| margin-top: 15px; | |
| } | |
| .anatomy-controls { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .anatomy-item { | |
| flex-grow: 1; | |
| margin-right: 15px; | |
| } | |
| .anatomy-item label { | |
| margin-bottom: 5px; | |
| display: block; | |
| } | |
| .anatomy-item select { | |
| width: 100%; | |
| padding: 8px; | |
| border-radius: 6px; | |
| border: 1px solid #bdc3c7; | |
| } | |
| .anatomy-hint { | |
| font-size: 0.8rem; | |
| color: #34495e; | |
| background: rgba(255, 255, 255, 0.3); | |
| padding: 10px; | |
| border-radius: 6px; | |
| flex-shrink: 0; | |
| max-width: 40%; | |
| } | |
| .anatomy-hint p { | |
| margin: 0; | |
| } | |
| .text-generation-info { | |
| background: rgba(185, 128, 41, 0.1); | |
| border-radius: 10px; | |
| padding: 15px; | |
| margin-top: 20px; | |
| } | |
| .text-generation-info h3 { | |
| color: #b58029; | |
| margin-bottom: 10px; | |
| } | |
| .text-generation-info ul { | |
| list-style-type: none; | |
| padding: 0; | |
| } | |
| .text-generation-info li { | |
| margin-bottom: 8px; | |
| padding-left: 20px; | |
| position: relative; | |
| background: rgba(255, 255, 255, 0.1); | |
| padding: 8px; | |
| border-radius: 6px; | |
| } | |
| .text-generation-info li::before { | |
| content: '•'; | |
| position: absolute; | |
| left: 0; | |
| color: #b58029; | |
| } | |
| .text-hint { | |
| font-size: 0.8rem; | |
| color: #34495e; | |
| background: rgba(255, 255, 255, 0.3); | |
| padding: 10px; | |
| border-radius: 6px; | |
| margin-top: 10px; | |
| } | |
| .text-hint p { | |
| margin: 0; | |
| } | |
| .ai-enhancement-panel { | |
| background: rgba(41, 185, 128, 0.1); | |
| border-radius: 10px; | |
| padding: 15px; | |
| margin-top: 20px; | |
| max-width: 700px; | |
| width: 100%; | |
| } | |
| .enhancement-controls { | |
| display: flex; | |
| justify-content: space-around; | |
| margin-bottom: 15px; | |
| } | |
| .enhancement-group { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .enhancement-group label { | |
| margin-bottom: 5px; | |
| font-size: 0.9rem; | |
| } | |
| .enhancement-result { | |
| background: rgba(255, 255, 255, 0.2); | |
| border-radius: 8px; | |
| padding: 10px; | |
| margin-top: 10px; | |
| } | |
| .enhancement-result.hidden { | |
| display: none; | |
| } | |
| .enhancement-result h3 { | |
| margin-top: 0; | |
| color: #2980b9; | |
| } | |
| #semanticCheckList { | |
| list-style-type: none; | |
| padding: 0; | |
| } | |
| #semanticCheckList li { | |
| margin-bottom: 5px; | |
| padding: 5px; | |
| background: rgba(41, 128, 185, 0.1); | |
| border-radius: 4px; | |
| } | |
| .how-it-works { | |
| background: rgba(185, 41, 128, 0.1); | |
| border-radius: 10px; | |
| padding: 15px; | |
| margin-top: 20px; | |
| } | |
| .how-it-works h2 { | |
| color: #b92980; | |
| margin-bottom: 15px; | |
| } | |
| .how-it-works li { | |
| margin-bottom: 8px; | |
| padding-left: 20px; | |
| position: relative; | |
| background: rgba(255, 255, 255, 0.1); | |
| padding: 8px; | |
| border-radius: 6px; | |
| } | |
| .how-it-works li::before { | |
| content: '•'; | |
| position: absolute; | |
| left: 0; | |
| color: #b92980; | |
| } | |
| .dataset-info { | |
| background: rgba(41, 78, 185, 0.1); | |
| border-radius: 10px; | |
| padding: 15px; | |
| margin-top: 20px; | |
| } | |
| .dataset-info h2 { | |
| color: #294e80; | |
| margin-bottom: 15px; | |
| } | |
| .dataset-info ul { | |
| list-style-type: none; | |
| padding: 0; | |
| } | |
| .dataset-info li { | |
| margin-bottom: 8px; | |
| padding-left: 20px; | |
| position: relative; | |
| background: rgba(255, 255, 255, 0.1); | |
| padding: 8px; | |
| border-radius: 6px; | |
| } | |
| .dataset-info li::before { | |
| content: '•'; | |
| position: absolute; | |
| left: 0; | |
| color: #294e80; | |
| } | |
| .dataset-info .database-categories { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 20px; | |
| } | |
| .dataset-info .database-category { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 10px; | |
| padding: 15px; | |
| } | |
| .dataset-info .database-category h3 { | |
| color: #294e80; | |
| margin-bottom: 10px; | |
| } | |
| .dataset-info .database-category ul { | |
| list-style-type: none; | |
| padding: 0; | |
| } | |
| .dataset-info .database-category li { | |
| margin-bottom: 5px; | |
| padding: 5px; | |
| background: rgba(41, 78, 185, 0.05); | |
| border-radius: 5px; | |
| } | |
| .dataset-insights { | |
| margin-top: 20px; | |
| background: rgba(41, 185, 128, 0.1); | |
| border-radius: 10px; | |
| padding: 15px; | |
| } | |
| .dataset-insights h3 { | |
| color: #294e80; | |
| margin-bottom: 10px; | |
| } | |
| .dataset-insights ul { | |
| list-style-type: disc; | |
| padding-left: 20px; | |
| } | |
| .dataset-insights li { | |
| margin-bottom: 5px; | |
| } | |
| .control-and-error-reduction { | |
| background: rgba(185, 41, 41, 0.1); | |
| border-radius: 10px; | |
| padding: 15px; | |
| margin-top: 20px; | |
| } | |
| .control-and-error-reduction h2 { | |
| color: #b92929; | |
| margin-bottom: 15px; | |
| } | |
| .control-and-error-reduction ul { | |
| list-style-type: none; | |
| padding: 0; | |
| } | |
| .control-and-error-reduction li { | |
| margin-bottom: 15px; | |
| padding-left: 20px; | |
| position: relative; | |
| background: rgba(255, 255, 255, 0.1); | |
| padding: 10px; | |
| border-radius: 8px; | |
| } | |
| .control-and-error-reduction li::before { | |
| content: '•'; | |
| position: absolute; | |
| left: 0; | |
| color: #b92929; | |
| font-weight: bold; | |
| top: 10px; | |
| } | |
| .control-and-error-reduction li strong { | |
| color: #2c3e50; | |
| } | |
| .control-and-error-reduction ul ul { | |
| list-style-type: disc; | |
| padding-left: 30px; | |
| margin-top: 10px; | |
| margin-bottom: 0; | |
| } | |
| .control-and-error-reduction ul ul li { | |
| margin-bottom: 5px; | |
| padding: 5px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 5px; | |
| position: relative; | |
| padding-left: 0; | |
| } | |
| .control-and-error-reduction ul ul li::before { | |
| content: ''; | |
| } | |
| .control-and-error-reduction code { | |
| font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; | |
| background-color: rgba(0, 0, 0, 0.05); | |
| padding: 2px 4px; | |
| border-radius: 4px; | |
| font-size: 0.9em; | |
| color: #34495e; | |
| word-break: break-all; | |
| } | |
| .shading-explanation { | |
| background: rgba(41, 185, 41, 0.1); | |
| border-radius: 10px; | |
| padding: 15px; | |
| margin-top: 20px; | |
| } | |
| .shading-explanation h2 { | |
| color: #29b529; | |
| margin-bottom: 15px; | |
| } | |
| .shading-explanation ul { | |
| list-style-type: none; | |
| padding: 0; | |
| } | |
| .shading-explanation li { | |
| margin-bottom: 15px; | |
| padding-left: 20px; | |
| position: relative; | |
| background: rgba(255, 255, 255, 0.1); | |
| padding: 10px; | |
| border-radius: 8px; | |
| } | |
| .shading-explanation li::before { | |
| content: '🔹'; | |
| position: absolute; | |
| left: 0; | |
| color: #2980b9; | |
| font-weight: bold; | |
| top: 10px; | |
| } | |
| .shading-explanation li strong { | |
| color: #2c3e50; | |
| } | |
| .shading-explanation ul ul { | |
| list-style-type: disc; | |
| padding-left: 30px; | |
| margin-top: 10px; | |
| margin-bottom: 0; | |
| } | |
| .shading-explanation ul ul li { | |
| margin-bottom: 5px; | |
| padding: 5px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 5px; | |
| position: relative; | |
| padding-left: 0; | |
| } | |
| .shading-explanation ul ul li::before { | |
| content: ''; | |
| } | |
| .technical-section { | |
| background: rgba(41, 185, 41, 0.1); | |
| border-radius: 10px; | |
| padding: 15px; | |
| margin-top: 20px; | |
| } | |
| .technical-section h2 { | |
| color: #29b529; | |
| margin-bottom: 15px; | |
| } | |
| .technical-section ul { | |
| list-style-type: none; | |
| padding: 0; | |
| } | |
| .technical-section li { | |
| margin-bottom: 15px; | |
| padding-left: 20px; | |
| position: relative; | |
| background: rgba(255, 255, 255, 0.1); | |
| padding: 10px; | |
| border-radius: 8px; | |
| } | |
| .technical-section li::before { | |
| content: '✨'; | |
| position: absolute; | |
| left: 0; | |
| color: #29b529; | |
| font-weight: bold; | |
| top: 10px; | |
| } | |
| .technical-section li strong { | |
| color: #2c3e50; | |
| } | |
| .technical-section ul ul { | |
| list-style-type: disc; | |
| padding-left: 30px; | |
| margin-top: 10px; | |
| margin-bottom: 0; | |
| } | |
| .technical-section ul ul li { | |
| margin-bottom: 5px; | |
| padding: 5px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 5px; | |
| position: relative; | |
| padding-left: 0; | |
| } | |
| .technical-section ul ul li::before { | |
| content: ''; | |
| } | |
| .speed-info { | |
| background: rgba(185, 41, 78, 0.1); | |
| } | |
| .speed-info h2 { | |
| color: #b9294e; | |
| } | |
| .speed-info table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-bottom: 20px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .speed-info th, .speed-info td { | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| padding: 12px; | |
| text-align: left; | |
| } | |
| .speed-info th { | |
| background-color: rgba(185, 41, 78, 0.2); | |
| color: #2c3e50; | |
| font-weight: bold; | |
| } | |
| .speed-info tr:nth-child(even) { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| } | |
| .speed-factors { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .speed-up, .speed-down { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 8px; | |
| padding: 15px; | |
| } | |
| .speed-up h3 { | |
| color: #28a745; | |
| margin-top: 0; | |
| } | |
| .speed-down h3 { | |
| color: #dc3545; | |
| margin-top: 0; | |
| } | |
| .speed-factors ul { | |
| list-style-type: none; | |
| padding: 0; | |
| } | |
| .speed-factors li { | |
| margin-bottom: 8px; | |
| padding-left: 20px; | |
| position: relative; | |
| background: none; | |
| border-radius: 0; | |
| padding: 0; | |
| } | |
| .speed-factors li::before { | |
| content: '•'; | |
| position: absolute; | |
| left: 0; | |
| color: inherit; | |
| font-weight: normal; | |
| top: 0; | |
| } | |
| .ai-errors-solutions { | |
| background: rgba(185, 41, 41, 0.1); | |
| border-radius: 10px; | |
| padding: 20px; | |
| margin-top: 20px; | |
| max-width: 700px; | |
| width: 100%; | |
| text-align: left; | |
| } | |
| .ai-errors-solutions h2 { | |
| color: #b92929; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| } | |
| .ai-errors-solutions .error-section { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 8px; | |
| padding: 15px; | |
| margin-bottom: 15px; | |
| } | |
| .ai-errors-solutions .error-section h3 { | |
| color: #b92929; | |
| margin-top: 0; | |
| margin-bottom: 10px; | |
| } | |
| .ai-errors-solutions .error-section h4 { | |
| color: #28a745; | |
| margin-top: 10px; | |
| margin-bottom: 5px; | |
| } | |
| .ai-errors-solutions .error-section p { | |
| font-size: 0.95rem; | |
| line-height: 1.5; | |
| color: #34495e; | |
| } | |
| .ai-errors-solutions .error-section ul { | |
| list-style-type: none; | |
| padding: 0; | |
| margin-top: 10px; | |
| } | |
| .ai-errors-solutions .error-section li { | |
| margin-bottom: 8px; | |
| padding-left: 20px; | |
| position: relative; | |
| background: rgba(41, 185, 41, 0.05); | |
| padding: 8px; | |
| border-radius: 5px; | |
| } | |
| .ai-errors-solutions .error-section li::before { | |
| content: '•'; | |
| position: absolute; | |
| left: 0; | |
| color: #28a745; | |
| font-weight: bold; | |
| } | |
| @media (max-width: 768px) { | |
| .technical-info, .diffusion-details, .anatomy-controls, .style-grid { | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .style-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .style-item, .anatomy-item { | |
| width: 100%; | |
| margin-right: 0; | |
| } | |
| .anatomy-controls { | |
| align-items: flex-start; | |
| } | |
| .anatomy-hint { | |
| max-width: 100%; | |
| } | |
| .technical-section ul li { | |
| padding-left: 10px; | |
| } | |
| .technical-section li::before { | |
| left: -10px; | |
| } | |
| .speed-factors { | |
| grid-template-columns: 1fr; | |
| } | |
| .speed-factors li { | |
| padding-left: 10px; | |
| } | |
| .speed-factors li::before { | |
| left: -10px; | |
| } | |
| .ai-errors-solutions .error-section li { | |
| padding-left: 10px; | |
| } | |
| .ai-errors-solutions .error-section li::before { | |
| left: -10px; | |
| } | |
| } |