diff --git a/script.js b/script.js index 4fa7ee3..28ae552 100644 --- a/script.js +++ b/script.js @@ -1,32 +1,61 @@ -document.getElementById('dark-mode-toggle').addEventListener('click', function() { - document.body.classList.toggle('dark-mode'); - if (document.body.classList.contains('dark-mode')) { - this.textContent = '☀️'; - } else { - this.textContent = '🌙'; - } -}); - -const yearLinks = document.querySelectorAll('.year-nav a'); +// Dark Mode Toggle +const darkModeToggle = document.getElementById('dark-mode-toggle'); + +if (darkModeToggle) { + darkModeToggle.addEventListener('click', function () { + document.body.classList.toggle('dark-mode'); + if (document.body.classList.contains('dark-mode')) { + this.textContent = '☀️'; + } else { + this.textContent = '🌙'; + } + }); +} + +// Navigation Active State for Index Page (Year Navigation) +const yearNavLinks = document.querySelectorAll('.year-nav a'); const yearSections = document.querySelectorAll('.year'); -window.addEventListener('scroll', () => { - let currentYear = ''; - - yearSections.forEach(section => { - const sectionTop = section.offsetTop; - const sectionHeight = section.offsetHeight; - const windowHeight = window.innerHeight; - - if (window.pageYOffset >= sectionTop - windowHeight / 3 && window.pageYOffset < sectionTop + sectionHeight - windowHeight / 3) { - currentYear = section.id; - } - }); - - yearLinks.forEach(link => { - link.classList.remove('active'); - if (link.getAttribute('href') === '#' + currentYear) { - link.classList.add('active'); - } - }); -}); \ No newline at end of file +if (yearNavLinks.length > 0 && yearSections.length > 0) { + window.addEventListener('scroll', () => { + let currentYear = ''; + + yearSections.forEach(section => { + const sectionTop = section.offsetTop - 200; + if (window.pageYOffset >= sectionTop) { + currentYear = section.getAttribute('id'); + } + }); + + yearNavLinks.forEach(link => { + link.classList.remove('active'); + if (link.getAttribute('href') === '#' + currentYear) { + link.classList.add('active'); + } + }); + }); +} + +// Navigation Active State for Summary Page (Topic Navigation) +const topicNavLinks = document.querySelectorAll('.topic-nav a'); +const topicSections = document.querySelectorAll('.topic-section'); + +if (topicNavLinks.length > 0 && topicSections.length > 0) { + window.addEventListener('scroll', () => { + let currentTopic = ''; + + topicSections.forEach(section => { + const sectionTop = section.offsetTop - 200; + if (window.pageYOffset >= sectionTop) { + currentTopic = section.getAttribute('id'); + } + }); + + topicNavLinks.forEach(link => { + link.classList.remove('active'); + if (link.getAttribute('href') === '#' + currentTopic) { + link.classList.add('active'); + } + }); + }); +} diff --git a/styles.css b/styles.css index e24b560..9d83907 100644 --- a/styles.css +++ b/styles.css @@ -1,89 +1,130 @@ /* Base Styles */ body { font-family: 'Roboto', sans-serif; - background-color: #f9f9f9; - padding: 50px; - padding-bottom: 10px; + margin: 0; + padding: 0; line-height: 1.5; + color: #333; + background-color: #f9f9f9; } /* Header Styles */ .header { text-align: center; - margin-bottom: 50px; padding: 20px 0; - background-color: #f9f9f9; + background-color: #007BFF; + color: #fff; position: relative; } -.header::before, -.header::after { - content: ''; +.header h1 { + font-size: 42px; + margin-bottom: 10px; +} + +.header h2 { + font-size: 28px; + font-weight: normal; +} + +/* GitHub Button */ +.github-button-container { position: absolute; - top: 0; - bottom: 0; - width: 2px; - background-color: #007BFF; + top: 20px; + left: 20px; } -.header::before { - left: 0; +.github-button svg { + width: 30px; + height: 30px; + fill: #fff; + transition: transform 0.3s; } -.header::after { - right: 0; +.github-button:hover svg { + transform: scale(1.1); } -.header h1, -.header h2 { - position: relative; - z-index: 1; - font-family: 'Arial', sans-serif; +/* Dark Mode Toggle */ +.dark-mode-toggle-container { + position: absolute; + top: 20px; + right: 20px; } -.header h1 { - font-size: 42px; - font-weight: bold; +.dark-mode-toggle { + background-color: transparent; + border: none; + font-size: 24px; + color: #fff; + cursor: pointer; + transition: transform 0.3s; +} + +.dark-mode-toggle:hover { + transform: scale(1.1); +} + +/* Navigation Bar (Index Page) */ +.year-nav { + text-align: center; + margin-bottom: 30px; + position: sticky; + top: 0; + background-color: #f9f9f9; + z-index: 100; + padding: 10px 0; +} + +.year-nav a { + display: inline-block; + margin: 0 10px; + padding: 8px 15px; + background-color: #f9f9f9; + border: 2px solid #007BFF; + border-radius: 20px; + text-decoration: none; color: #333; - margin-bottom: 10px; + font-weight: bold; + transition: background-color 0.3s ease, color 0.3s ease; } -.header h2 { - font-size: 28px; - font-weight: normal; - color: #555; +.year-nav a:hover { + background-color: #007BFF; + color: #fff; } -/* Timeline Container */ +.year-nav a.active { + background-color: #007BFF; + color: #fff; +} + +/* Timeline Styles (Index Page) */ .timeline { max-width: 1000px; margin: 0 auto; position: relative; + padding: 0 20px; +} + +.year { + margin-bottom: 60px; } -/* Year Label */ .year h2 { - font-size: 28px; - font-weight: bold; - margin-bottom: 40px; - color: #333; + font-size: 32px; + color: #007BFF; border-bottom: 2px solid #007BFF; padding-bottom: 10px; + margin-bottom: 30px; } -/* Event Styles */ .event { border-left: 2px solid #007BFF; padding-left: 30px; margin-bottom: 40px; - max-width: 500px; position: relative; padding-bottom: 20px; - transition: all 0.3s ease; -} - -.event:hover { - background-color: #f4f4f4; } .event .date { @@ -128,17 +169,9 @@ body { height: 9.5px; } -.info.special:hover::before { - content: 'Significant event'; - background-color: #8C2D2D; - color: white; - font-size: 12px; - padding: 5px; - border-radius: 4px; - width: auto; - height: auto; - text-align: center; - white-space: nowrap; +/* Hover Effects */ +.event:hover { + background-color: #f4f4f4; } /* Footer Styles */ @@ -147,8 +180,6 @@ body { background-color: #f9f9f9; padding: 20px 0; border-top: 2px solid #007BFF; - border-bottom: 2px solid #007BFF; - margin-top: 40px; } .footer .content { @@ -192,7 +223,7 @@ body { text-decoration: underline; } -.footer ul li:before { +.footer ul li::before { content: ''; position: absolute; top: 50%; @@ -204,163 +235,124 @@ body { background-color: #007BFF; } -/* Scrollbar design */ -::-webkit-scrollbar { - width: 12px; - background-color: #e4ecfd; -} - -::-webkit-scrollbar-thumb { - background-color: #003b7287; -} - -::-webkit-scrollbar-thumb:hover { - background-color: #003b72f7; -} - -/* Bottom Footer Styles */ -footer { - text-align: center; - background-color: #f9f9f9; - padding: 20px 0; - border-bottom: 2px solid #007BFF; -} - -footer .content { - max-width: 1000px; - margin: 0 auto; -} - -footer .footer-links { +/* Topic Navigation Bar (Summary Page) */ +.topic-nav { display: flex; + flex-wrap: wrap; justify-content: center; - gap: 20px; + background-color: #0056b3; + padding: 10px 0; + position: sticky; + top: 0; + z-index: 1000; } -footer .footer-links a { - font-size: 18px; - color: #333; +.topic-nav a { + color: #fff; text-decoration: none; + margin: 5px 15px; + font-weight: bold; transition: color 0.3s; - display: flex; - align-items: center; } -footer .footer-links a:hover { - color: #555; - text-decoration: underline; +.topic-nav a:hover { + color: #ffd700; } -/* GitHub icon styles */ -.github-icon { - vertical-align: middle; - margin-right: 5px; +.topic-nav a.active { + border-bottom: 2px solid #ffd700; + padding-bottom: 5px; } -/* Responsive design */ -@media (max-width: 768px) { - body { - padding: 30px 15px; - } - - .header h1 { - font-size: 36px; - } - - .header h2 { - font-size: 24px; - } - - .year h2 { - font-size: 24px; - } - - .event { - padding-left: 20px; - } - - .event::before { - left: -7px; - width: 14px; - height: 14px; - } - - .info::before { - width: 6px; - height: 6px; - } - - .info.special::before { - width: 7.5px; - height: 7.5px; - } +/* Summary Container (Summary Page) */ +.summary-container { + max-width: 1200px; + margin: 40px auto; + padding: 0 20px; } +/* Topic Section (Summary Page) */ +.topic-section { + margin-bottom: 60px; +} -.github-button-container { - position: absolute; - top: 10px; - right: 10px; - z-index: 1000; +.topic-section h2 { + font-size: 32px; + color: #007BFF; + border-bottom: 2px solid #007BFF; + padding-bottom: 10px; + margin-bottom: 30px; } -.github-button { - background-color: transparent; - padding: 10px 10px; - font-size: 16px; - border-radius: 0px; - transition: transform 0.3s ease, background-color 0.3s ease; +/* Card (Summary Page) */ +.card { + background-color: #fff; + border: 1px solid #ddd; + padding: 20px; + border-radius: 8px; + margin-bottom: 20px; } -.github-button:hover { - background-color: rgba(255, 255, 255, 0.1); - transform: scale(1.1); +.card h3 { + font-size: 24px; + color: #333; + margin-bottom: 15px; } -.github-button:active { - background-color: rgba(255, 255, 255, 0.2); +.card ul { + list-style: none; + padding: 0; + color: #555; } -.github-button svg { - width: 28px; - height: 28px; +.card ul li { + margin-bottom: 10px; + padding-left: 25px; + position: relative; } -@media (max-width: 768px) { - .github-button-container { - bottom: 10px; - right: 10px; - transform: none; - } +.card ul li::before { + content: ''; + position: absolute; + left: 10px; + top: 12px; + width: 6px; + height: 6px; + background-color: #007BFF; + border-radius: 50%; } +.card ul li strong { + color: #333; +} -/* Updated footer styles */ +/* Footer Styles (Shared) */ footer { - background-color: #f9f9f9; + background-color: #007BFF; + color: #fff; padding: 40px 0; - border-top: 2px solid #007BFF; } footer .content { - max-width: 1000px; + max-width: 1200px; margin: 0 auto; display: flex; + flex-wrap: wrap; justify-content: space-between; + padding: 0 20px; } .footer-section { - flex: 1; - padding: 0 20px; + flex: 1 1 45%; + margin-bottom: 20px; } .footer-section h3 { - color: #333; margin-bottom: 15px; } -.footer-section p { - color: #666; +.footer-section p, +.footer-section ul { margin-bottom: 15px; } @@ -373,14 +365,14 @@ footer .content { margin-bottom: 10px; } -.footer-section a, .github-link { - color: #007BFF; +.footer-section a { + color: #ffd700; text-decoration: none; - transition: color 0.3s ease; + transition: color 0.3s; } -.footer-section a:hover, .github-link:hover { - color: #0056b3; +.footer-section a:hover { + color: #fff; } .github-link { @@ -389,117 +381,150 @@ footer .content { } .github-link svg { - margin-right: 5px; + margin-right: 8px; + fill: #ffd700; } -@media (max-width: 768px) { - footer .content { - flex-direction: column; - } +/* Dark Mode Styles */ +body.dark-mode { + background-color: #121212; + color: #e0e0e0; +} - .footer-section { - margin-bottom: 30px; - } +body.dark-mode .header { + background-color: #1f1f1f; + color: #e0e0e0; } +body.dark-mode .year-nav, +body.dark-mode .topic-nav { + background-color: #1f1f1f; +} -/* Year Navigation Bar */ -.year-nav { - text-align: center; - margin-bottom: 30px; - position: sticky; - /* Make the navigation bar sticky */ - top: 0; - /* Stick it to the top of the viewport */ - background-color: #f9f9f9; - /* Match the background color */ - z-index: 100; - /* Ensure it stays on top of other elements */ - padding: 10px 0; - /* Add some padding for better visual appearance */ +body.dark-mode .year-nav a, +body.dark-mode .topic-nav a { + color: #e0e0e0; + background-color: transparent; + border-color: #555; } -.year-nav a { - display: inline-block; - margin: 0 10px; - padding: 8px 15px; - background-color: #f9f9f9; - border: 2px solid #007BFF; - border-radius: 20px; - text-decoration: none; - color: #333; - font-weight: bold; - transition: background-color 0.3s ease, color 0.3s ease; +body.dark-mode .year-nav a:hover, +body.dark-mode .topic-nav a:hover { + color: #ffd700; + background-color: #333; } -.year-nav a:hover { - background-color: #007BFF; - color: #fff; +body.dark-mode .year-nav a.active, +body.dark-mode .topic-nav a.active { + background-color: #333; + color: #ffd700; + border-color: #ffd700; } -.year-nav a.active { - background-color: #007BFF; - color: #fff; +body.dark-mode .event { + background-color: #1c1c1c; + border-color: #333; } - -.year { - scroll-margin-top: 80px; + +body.dark-mode .event .date { + color: #ffd700; } -.year-nav a:target { - background-color: #007BFF; - color: #fff; +body.dark-mode .event .info { + color: #e0e0e0; } -body.dark-mode { - background-color: #333; - color: white; +body.dark-mode .card { + background-color: #1c1c1c; + border-color: #333; } -body.dark-mode .header, body.dark-mode .footer,body.dark-mode footer, body.dark-mode .footer-section h3,body.dark-mode .footer-section,body.dark-mode .year-nav,body.dark-mode .year-nav a,body.dark-mode .year,body.dark-mode .event:hover{ - background-color: #333; - color: white; +body.dark-mode .card h3 { + color: #ffd700; } -body.dark-mode .header h1,body.dark-mode h1,body.dark-mode h2,body.dark-mode h3{ - color: white; +body.dark-mode .card ul li { + color: #e0e0e0; } -body.dark-mode .header h2, body.dark-mode .footer-section, body.dark-mode .event .date { - color: #919baa; + +body.dark-mode .card ul li strong { + color: #ffffff; } -body.dark-mode .year-nav a:hover,body.dark-mode .year-nav a.active , body.dark-mode .year-nav a:target{ - background-color: #007BFF; - color: #fff; - } +body.dark-mode .footer, +body.dark-mode footer { + background-color: #1f1f1f; + color: #e0e0e0; +} -.dark-mode-toggle-container { - position: absolute; - right: 20px; - top: 50px; - z-index: 1000; +body.dark-mode .footer-section a, +body.dark-mode .github-link svg { + color: #ffd700; + fill: #ffd700; } -.dark-mode-toggle { - background-color: #333; - color: white; - border: none; - padding: 5px 5px; - border-radius: 25px; - cursor: pointer; - font-size: 15px; - transition: background-color 0.3s, color 0.3s; +body.dark-mode .dark-mode-toggle { + color: #ffd700; } -.dark-mode-toggle:hover { - background-color: #555; +/* Responsive Design */ +@media (max-width: 768px) { + .header h1 { + font-size: 32px; + } + + .header h2 { + font-size: 24px; + } + + .github-button-container, + .dark-mode-toggle-container { + top: 10px; + } + + .year-nav a, + .topic-nav a { + margin: 5px 10px; + } + + .footer .content { + flex-direction: column; + align-items: center; + } + + .footer-section { + flex: 1 1 100%; + text-align: center; + } + + .timeline, + .summary-container { + padding: 0 15px; + } } -body.dark-mode .dark-mode-toggle { - background-color: white; - color: black; +/* Scrollbar Styles */ +::-webkit-scrollbar { + width: 12px; + background-color: #e4ecfd; +} + +::-webkit-scrollbar-thumb { + background-color: #003b7287; } -body.dark-mode .dark-mode-toggle:hover { - background-color: #ddd; -} \ No newline at end of file +::-webkit-scrollbar-thumb:hover { + background-color: #003b72f7; +} + +body.dark-mode ::-webkit-scrollbar { + background-color: #1f1f1f; +} + +body.dark-mode ::-webkit-scrollbar-thumb { + background-color: #444; +} + +body.dark-mode ::-webkit-scrollbar-thumb:hover { + background-color: #555; +} diff --git a/summary.html b/summary.html new file mode 100644 index 0000000..928c145 --- /dev/null +++ b/summary.html @@ -0,0 +1,341 @@ + + + + + + + AI Developments Summary + + + + + + + + + + + + +
+
+ + + + +
+
+ +
+

AI Developments Summary

+

2022 - 2024

+
+ + + + + +
+ +
+

Language Models

+ + +
+

2022

+
    +
  • November: ChatGPT 3.5 by OpenAI was released to the public and quickly became a viral sensation.
    • +
+
+ + +
+

2023

+
    +
  • February: LLaMA by Meta was released as an open-source language model for research purposes and was later leaked.
    • +
  • March: GPT-4 by OpenAI was partially released, featuring multimodal image analysis and improved multi-language support.
    • +
  • July: Claude 2 by Anthropic was announced as a new version of their large language model.
    • +
+
+ + +
+

2024

+
    +
  • March: Claude 3 by Anthropic was announced, featuring improved capabilities.
    • +
  • May: GPT-4-O by OpenAI was announced with full multimodal capabilities.
    • +
  • April: LLaMA 3 by Meta was released as an open-source model in sizes 8B and 70B parameters.
    • +
  • July: LLaMA 3.1 by Meta was released in sizes 8B, 70B, and 405B, featuring capabilities comparable to the best closed-source models.
    • +
  • March: Grok 1.5 by X Corporation was announced as an upcoming open-source model.
    • +
  • April: Grok-1.5V was released, integrating high-level image recognition.
    • +
  • April: Mixtral 8x22B by Mistral AI was released as an open-source model.
    • +
  • May: Phi-3-mini by Microsoft was released as an open-source model.
    • +
  • April: OpenELM by Apple was released as a series of small language models.
    • +
  • July: gpt4o mini by OpenAI was released, offering high capabilities at a low cost.
    • +
  • August: gpt4o 0806 by OpenAI was released, achieving 100% success in generating valid JSON output.
    • +
  • August: LTM2mini by Magic AI was developed, capable of working with a context window of 100 million tokens.
    • +
  • September: o1 preview and o1 mini by OpenAI were released, showing significant improvements in reasoning tasks.
    • +
  • July: Mistral Large 2 by Mistral AI was released, presenting capabilities close to closed-source models.
    • +
  • July: AlphaProof and AlphaGeometry 2 by Google DeepMind were unveiled, winning silver medals at the International Mathematical Olympiad.
    • +
+
+
+ + +
+

Image Models

+ + +
+

2022

+
    +
  • February: Midjourney v1 was released.
    • +
  • April: Midjourney v2 was released.
    • +
  • April: DALL-E 2 was announced for gradual release.
    • +
  • July: Midjourney v3 was launched.
    • +
  • August: Stable Diffusion 1.4 was released.
    • +
  • October: Stable Diffusion 1.5 became available.
    • +
  • November: Midjourney v4 was released.
    • +
  • November: Stable Diffusion 2.0 was launched.
    • +
  • December: Stable Diffusion 2.1 was released.
    • +
+
+ + +
+

2023

+
    +
  • March: Midjourney v5 was launched.
    • +
  • May: Midjourney v5.1 was released.
    • +
  • June: Midjourney v5.2 was launched.
    • +
  • July: Stable Diffusion XL 1.0 was released.
    • +
  • October: DALL-E 3 was released.
    • +
  • October: Adobe Firefly 2 was released.
    • +
  • November: Stable Diffusion XL Turbo was released, allowing real-time image creation.
    • +
+
+ + +
+

2024

+
    +
  • February: Stable Diffusion 3 was announced and gradually released.
    • +
  • December 2023: Midjourney v6 was launched.
    • +
  • July: Midjourney v6.1 was released.
    • +
  • May: Firefly 3 by Adobe was announced.
    • +
  • August: Flux by Black Forest Labs was released, outperforming similar models.
    • +
  • August: Imagen 3 by Google was released.
    • +
  • August: Ideogram 2.0 was released, offering superior image generation capabilities.
    • +
  • April: Chameleon by Meta was introduced, seamlessly rendering text and images.
    • +
+
+
+ + +
+

Video Models

+ + +
+

2024

+
    +
  • February: Sora by OpenAI was announced, capable of producing videos up to a minute long.
    • +
  • May: Veo by Google was announced.
    • +
  • June: Gen3 Alpha by Runway was introduced.
    • +
  • August: Dream Machine 1.5 by Luma was unveiled.
    • +
+
+
+ + +
+

Music Models

+ + +
+

2023

+
    +
  • March: Suno v3 by Suno AI was released to the public.
    • +
+
+ + +
+

2024

+
    +
  • April: Stable Audio 2.0 by Stability AI was released.
    • +
  • May: Music AI by Google was announced.
    • +
  • May: Suno v3.5 was released.
    • +
  • July: Udio v1.5 was released, an updated music creation model.
    • +
+
+
+ + +
+

Multimodal Models

+ + +
+

2023

+
    +
  • March: GPT-4 by OpenAI featured multimodal image analysis.
    • +
  • March: Bard by Google was released with limited capabilities.
    • +
+
+ + +
+

2024

+
    +
  • February: Gemini Pro 1.5 by Google was announced, capable of parsing up to a million tokens, images, and videos.
    • +
  • April: Chameleon by Meta was introduced, seamlessly rendering text and images.
    • +
  • May: Astra by Google was announced, a multimodal model for real-time audio and video reception.
    • +
  • June: DeepSeekCoderV2 by DeepSeekAI was published, an open-source model with impressive capabilities.
    • +
  • August: Pixtral12B by Mistral was introduced, capable of processing both images and text.
    • +
  • May: Reka AI presented a series of multimodal language models capable of processing video, audio, and images.
    • +
+
+
+ + +
+

Chatbots

+ + +
+

2022

+
    +
  • November: ChatGPT 3.5 by OpenAI was released.
    • +
+
+ + +
+

2023

+
    +
  • February: Bing AI by Microsoft was gradually released, integrating internet search.
    • +
  • March: Bard by Google was released in a limited capacity.
    • +
+
+ + +
+

2024

+
    +
  • February: Grok AI by X Corporation was launched.
    • +
  • May: SearchGPT by OpenAI was launched, an integrated web search.
    • +
  • May: AI Overviews by Google was announced for Google Search.
    • +
  • May: Copilot+ by Microsoft was announced, allowing full search of user history through screenshots.
    • +
+
+
+ + +
+

Open-Source Models

+ + +
+

2022

+
    +
  • August: Stable Diffusion 1.4 was released.
    • +
  • October: Stable Diffusion 1.5 was released.
    • +
+
+ + +
+

2023

+
    +
  • February: LLaMA by Meta was released and later leaked.
    • +
+
+ + +
+

2024

+
    +
  • April: LLaMA 3 by Meta was released.
    • +
  • July: LLaMA 3.1 by Meta was released.
    • +
  • July: Mistral Large 2 by Mistral AI was released.
    • +
  • April: Mixtral 8x22B by Mistral AI was released.
    • +
  • June: Gemma 2 by Google was released.
    • +
  • May: Phi-3-mini by Microsoft was released.
    • +
  • April: OpenELM by Apple was released.
    • +
  • June: DeepSeekCoderV2 by DeepSeekAI was published.
    • +
  • August: Pixtral12B by Mistral was introduced.
    • +
  • May: Codestral by Mistral AI was released.
    • +
  • July: Codestral Mamba, Mistral NeMo, and Mathstral were released by Mistral AI.
    • +
  • May: Florence 2 image recognition models by Microsoft were released.
    • +
+
+
+
+ + + + + + + +