Hugging Face's logo

Spaces:
Rights4AI
/
open-image-generation
Running

App Files Community
linoyts HF Staff commited on
Commit
be02ca1
·
verified ·
1 Parent(s): 64ef0f7

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +23 -5
index.html CHANGED
@@ -407,13 +407,28 @@
407
  </head>
408
  <body>
409
  <header>
 
 
 
 
 
 
 
 
 
 
 
 
 
410
  <nav class="nav-links">
411
  <a href="https://huggingface.co" target="_blank">Hugging Face</a>
 
412
  </nav>
413
  </header>
414
 
415
  <section class="hero">
416
- <h2>Open-Source Image Generation</h2>
 
417
  </section>
418
 
419
  <nav class="prompt-nav">
@@ -444,6 +459,9 @@
444
  </footer>
445
 
446
  <script>
 
 
 
447
  // Data
448
  const models = [
449
  { id: 'dalle_mini', name: 'DALL-E Mini', year: '2022', folder: 'dalle_mini' },
@@ -575,9 +593,9 @@
575
  function renderSingleView(prompt) {
576
  const model = models[currentModelIndex];
577
  const images = [
578
- `${model.folder}/${prompt.file}.png`,
579
- `${model.folder}/${prompt.file}_2.png`,
580
- `${model.folder}/${prompt.file}_3.png`
581
  ];
582
 
583
  imageContainer.className = 'image-container';
@@ -596,7 +614,7 @@
596
  imageContainer.className = 'image-container compare-grid';
597
  imageContainer.innerHTML = models.map((model, i) => `
598
  <div class="image-card" style="animation-delay: ${i * 0.1}s">
599
- <img src="${model.folder}/${prompt.file}.png" alt="${prompt.text}" loading="lazy" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect fill=%22%231a1a1f%22 width=%22100%22 height=%22100%22/><text x=%2250%22 y=%2250%22 text-anchor=%22middle%22 fill=%22%23636366%22 font-size=%228%22>Not found</text></svg>'">
600
  <div class="image-meta">
601
  <span class="model-name">${model.name}</span>
602
  <span class="model-year">${model.year}</span>
 
407
  </head>
408
  <body>
409
  <header>
410
+ <div class="logo">
411
+ <svg class="logo-icon" viewBox="0 0 95 88" fill="none" xmlns="http://www.w3.org/2000/svg">
412
+ <path d="M47.2119 76.5C54.4037 76.5 60.2119 70.6918 60.2119 63.5C60.2119 56.3082 54.4037 50.5 47.2119 50.5C40.0201 50.5 34.2119 56.3082 34.2119 63.5C34.2119 70.6918 40.0201 76.5 47.2119 76.5Z" fill="#FFD21E"/>
413
+ <path d="M81.3494 24.5C81.3494 34.165 73.5765 42 63.9119 42C54.2473 42 46.4744 34.165 46.4744 24.5C46.4744 14.835 54.2473 7 63.9119 7C73.5765 7 81.3494 14.835 81.3494 24.5Z" fill="#FF9D00"/>
414
+ <path d="M47.9494 24.5C47.9494 34.165 40.1765 42 30.5119 42C20.8473 42 13.0744 34.165 13.0744 24.5C13.0744 14.835 20.8473 7 30.5119 7C40.1765 7 47.9494 14.835 47.9494 24.5Z" fill="#FF9D00"/>
415
+ <path d="M86.7115 46.0001C86.7115 44.0001 85.8304 42.1466 84.2977 40.8775C82.765 39.6083 80.7302 38.9524 78.6511 39.0626C76.572 39.1727 74.6277 40.0391 73.2592 41.4677C71.8908 42.8963 71.2119 44.7636 71.2119 46.7636V52.2365C71.2119 53.0843 71.5469 53.8974 72.1439 54.4975C72.7409 55.0976 73.5508 55.4365 74.3956 55.4365H74.5282C75.373 55.4365 76.1829 55.0976 76.7799 54.4975C77.3769 53.8974 77.7119 53.0843 77.7119 52.2365V46.7636C77.7119 46.2636 77.9119 45.7636 78.2619 45.4136C78.6119 45.0636 79.1119 44.8636 79.6119 44.8636C80.1119 44.8636 80.6119 45.0636 80.9619 45.4136C81.3119 45.7636 81.5119 46.2636 81.5119 46.7636V63.5001C81.5119 65.0913 82.1428 66.6175 83.2681 67.7427C84.3933 68.868 85.9194 69.5001 87.5107 69.5001C87.9028 69.5001 88.2119 69.191 88.2119 68.7989V46.0001H86.7115Z" fill="#FF9D00"/>
416
+ <path d="M7.71191 46.0001C7.71191 44.0001 8.59307 42.1466 10.1258 40.8775C11.6585 39.6083 13.6932 38.9524 15.7723 39.0626C17.8515 39.1727 19.7957 40.0391 21.1642 41.4677C22.5327 42.8963 23.2119 44.7636 23.2119 46.7636V52.2365C23.2119 53.0843 22.8769 53.8974 22.2799 54.4975C21.6829 55.0976 20.873 55.4365 20.0282 55.4365H19.8956C19.0508 55.4365 18.2409 55.0976 17.6439 54.4975C17.0469 53.8974 16.7119 53.0843 16.7119 52.2365V46.7636C16.7119 46.2636 16.5119 45.7636 16.1619 45.4136C15.8119 45.0636 15.3119 44.8636 14.8119 44.8636C14.3119 44.8636 13.8119 45.0636 13.4619 45.4136C13.1119 45.7636 12.9119 46.2636 12.9119 46.7636V63.5001C12.9119 65.0913 12.281 66.6175 11.1558 67.7427C10.0305 68.868 8.50439 69.5001 6.91309 69.5001C6.52098 69.5001 6.21191 69.191 6.21191 68.7989V46.0001H7.71191Z" fill="#FF9D00"/>
417
+ <path d="M31.2119 28C32.8688 28 34.2119 26.6569 34.2119 25C34.2119 23.3431 32.8688 22 31.2119 22C29.555 22 28.2119 23.3431 28.2119 25C28.2119 26.6569 29.555 28 31.2119 28Z" fill="#3A3B45"/>
418
+ <path d="M63.2119 28C64.8688 28 66.2119 26.6569 66.2119 25C66.2119 23.3431 64.8688 22 63.2119 22C61.555 22 60.2119 23.3431 60.2119 25C60.2119 26.6569 61.555 28 63.2119 28Z" fill="#3A3B45"/>
419
+ <path d="M39.2119 56C39.2119 56 42.2119 62 47.2119 62C52.2119 62 55.2119 56 55.2119 56" stroke="#3A3B45" stroke-width="3" stroke-linecap="round"/>
420
+ </svg>
421
+ Open Image Progress
422
+ </div>
423
  <nav class="nav-links">
424
  <a href="https://huggingface.co" target="_blank">Hugging Face</a>
425
+ <a href="https://github.com" target="_blank">GitHub</a>
426
  </nav>
427
  </header>
428
 
429
  <section class="hero">
430
+ <h1>Open-Source Image Generation Has Evolved</h1>
431
+ <p>Witness the remarkable progress of open image models from 2022 to 2025. Same prompts, different eras.</p>
432
  </section>
433
 
434
  <nav class="prompt-nav">
 
459
  </footer>
460
 
461
  <script>
462
+ // Base URL for HuggingFace Space files
463
+ const BASE_URL = 'https://huggingface.co/spaces/linoyts/open-image-generation/resolve/main';
464
+
465
  // Data
466
  const models = [
467
  { id: 'dalle_mini', name: 'DALL-E Mini', year: '2022', folder: 'dalle_mini' },
 
593
  function renderSingleView(prompt) {
594
  const model = models[currentModelIndex];
595
  const images = [
596
+ `${BASE_URL}/${model.folder}/${prompt.file}.png`,
597
+ `${BASE_URL}/${model.folder}/${prompt.file}_2.png`,
598
+ `${BASE_URL}/${model.folder}/${prompt.file}_3.png`
599
  ];
600
 
601
  imageContainer.className = 'image-container';
 
614
  imageContainer.className = 'image-container compare-grid';
615
  imageContainer.innerHTML = models.map((model, i) => `
616
  <div class="image-card" style="animation-delay: ${i * 0.1}s">
617
+ <img src="${BASE_URL}/${model.folder}/${prompt.file}.png" alt="${prompt.text}" loading="lazy" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect fill=%22%231a1a1f%22 width=%22100%22 height=%22100%22/><text x=%2250%22 y=%2250%22 text-anchor=%22middle%22 fill=%22%23636366%22 font-size=%228%22>Not found</text></svg>'">
618
  <div class="image-meta">
619
  <span class="model-name">${model.name}</span>
620
  <span class="model-year">${model.year}</span>