Merge pull request #84 from premAI-io/email-modal

Author: casperdcl

_config.yml

@@ -59,11 +59,23 @@ parse:
 
       <div id="email-modal" class="modal">
         <div class="modal-content">
-          <!--<div class="header"><span class="close">&times;</span></div>-->
-          <label for="name">To access this book for free, please enter your email. We won't spam you!</label>
-          <input type="email" id="email" name="email" />
-          <button id="email-submit" onclick="emailButtonClick()">Submit</button>
-          <span class="email-error"></span>
+          <img src="https://static.premai.io/book/book-cover.jpg" alt="book cover" />
+          <div class="modal-text">
+            <h1>Enter your email to access this book for free</h1>
+            <p>
+              We&rsquo;ll send you updates whenever we make major changes<br />
+              (no spam nor giving your email to anyone else).
+            </p>
+            <div class="input-container">
+              <input type="email" id="email-input" name="email" placeholder="Enter your email..." />
+              <button id="email-submit" onclick="emailButtonClick()">Subscribe</button>
+            </div>
+            <span class="email-error"></span>
+            <p>
+              This book is open source; you can also read &amp; contribute at<br />
+              <a href="https://github.com/premAI-io/state-of-open-source-ai" target="_blank"><i class="fa-brands fa-github"></i>&nbsp;premAI-io/state-of-open-source-ai</a>.
+            </p>
+          </div>
         </div>
       </div>
   myst_enable_extensions: # https://myst-parser.readthedocs.io/en/latest/using/syntax-optional.html

_static/emails.css

@@ -5,62 +5,132 @@
   top: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.8);
 }
 
 .modal-content {
   display: flex;
+  flex-direction: row;
   margin: 15% auto;
-  width: 50vw;
-  padding: 30px;
+  width: 60vw;
+  padding: 80px 40px;
+  background-color: rgba(20, 20, 20, 1);
   box-shadow: 0 0 22px 1px black;
+  gap: 30px;
+  align-items: center;
+}
+
+@media only screen and (max-width: 480px) {
+  .modal-content {
+    width: 90vw !important;
+    flex-direction: column !important;
+  }
+  .modal-content input {
+    font-size: 0.9rem !important;
+  }
+  .modal-content button {
+    padding: 10px !important;
+  }
+  .modal-content img {
+    width: 50vw !important;
+  }
+}
+
+@media only screen and (min-width: 481px) and (max-width: 1022px) {
+  .modal-content {
+    width: 70vw !important;
+    flex-direction: column !important;
+  }
+  .modal-content input {
+    font-size: 0.95rem !important;
+  }
+  .modal-content img {
+    width: 30vw !important;
+  }
+}
+
+.modal-content img {
+  width: 20vw;
 }
 
 .modal-content .header {
   display: flex;
   justify-content: flex-end;
 }
 
-.modal-content label {
-  font-size: 1.2em;
-}
-
 .modal-content input {
-  border: 1px solid #F58E8E;
-  border-radius: 3px;
+  border: none;
+  background-color: transparent;
   margin: 10px 0;
+  flex: 1;
+  color: rgba(255, 255, 255, 0.70);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  width: 100%;
 }
 
 .modal-content input:focus {
   outline: none !important;
-  box-shadow: 0 0 10px #F58E8E;
 }
 
 .modal-content button {
-  color: black;
-  background-color: #F58E8E;
+  color: white;
   border: none;
-  border-radius: 3px;
-  font-size: 1.3em;
+  text-align: center;
+  font-size: 0.8rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 24px;
+  border-radius: 6px;
+  background: linear-gradient(90deg, #F58E8E 0%, #F1B370 100%);
+  padding: 10px 24px;
 }
 
-/*
-.close {
-  color: black;
-  font-size: 28px;
+.modal-content .email-error {
+  display: flex;
+  color: red;
+  font-size: 0.9em;
+  margin-top: 4px;
+}
+
+.modal-content .input-container {
+  display: flex;
+  padding: 18px 16px;
+  align-items: center;
+  align-self: stretch;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.20);
+}
+
+.modal-content h1 {
+  color: #FFF;
+  font-size: 1.3rem;
+  font-style: normal;
   font-weight: bold;
+  line-height: normal;
 }
 
-.close:hover,
-.close:focus {
-  color: #F58E8E;
+.modal-content p {
+  color: #FFF;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 26px;
+}
+
+.modal-content .modal-text {
+  flex: 1;
+  overflow: auto;
+}
+
+.modal-content a {
   text-decoration: none;
-  cursor: pointer;
+  color: #F58E8E;
 }
-*/
 
-.modal-content .email-error {
-  color: red;
-  font-size: 0.9em;
-  margin-top: 4px;
+.modal-content a:hover {
+  text-decoration: none;
+  color: #F1B370;
 }

_static/emails.js

@@ -21,7 +21,7 @@ function getCookie(cname) {
 }
 
 async function emailButtonClick() {
-  let emailInput = document.getElementById("email");
+  let emailInput = document.getElementById("email-input");
   let emailValue = emailInput.value;
   let res = await fetch("https://premai.pythonanywhere.com/email?a=" + emailValue);
   const ok = 200 <= res.status && res.status < 299;
@@ -43,11 +43,17 @@ async function emailButtonClick() {
 document.addEventListener('DOMContentLoaded', function() {
   let modal = document.getElementById('email-modal');
   let email = getCookie("address");
+  let emailInput = document.getElementById("email-input");
   if (email === "" || email == null) {
     modal.style.display = 'block';
-    let emailInput = document.getElementById("email");
     emailInput.value = "";
   }
-  //let closeModalBtn = modal.querySelector('.close');
-  //closeModalBtn.addEventListener('click', () => modal.style.display = 'none');
+  emailInput.focus()
+  // When user click Enter, click the submit button
+  emailInput.addEventListener("keypress", function(event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      document.getElementById("email-submit").click();
+    }
+  });
 });

_static/external_target.css

@@ -1,5 +1,5 @@
 a.reference.external:after {
-  content: "\2b77";
+  content: "↗";
   font-size: .7em;
   vertical-align: text-top;
   margin-left: .1em;

_static/font.css

@@ -0,0 +1,21 @@
+@font-face {
+    font-family: "Pretendard";
+    src: url("https://static.premai.io/fonts/Pretendard-Regular.woff2") format("woff2");
+    font-weight: normal;
+}
+
+@font-face {
+    font-family: "Pretendard";
+    src: url("https://static.premai.io/fonts/Pretendard-SemiBold.woff2") format("woff2");
+    font-weight: 600;
+}
+
+@font-face {
+    font-family: "Pretendard";
+    src: url("https://static.premai.io/fonts/Pretendard-Bold.woff2") format("woff2");
+    font-weight: bold;
+}
+
+* {
+    font-family: Pretendard, sans-serif;
+}

fine-tuning.md

@@ -10,7 +10,7 @@ Some ideas:
 - [Why You (Probably) Don't Need to Fine-tune an LLM](https://www.tidepool.so/2023/08/17/why-you-probably-dont-need-to-fine-tune-an-llm/) (instead, use few-shot prompting & retrieval-augmented generation)
 - [Fine-Tuning LLaMA-2: A Comprehensive Case Study for Tailoring Models to Unique Applications](https://www.anyscale.com/blog/fine-tuning-llama-2-a-comprehensive-case-study-for-tailoring-models-to-unique-applications) (fine-tuning LLaMA-2 for 3 real-world use cases)
 - [Private, local, open source LLMs](https://python.langchain.com/docs/guides/local_llms)
-- [Easy-to-use LLM fine-tuning framework (LLaMA-2, BLOOM, Falcon, Baichuan, Qwen, ChatGLM2)](https://github.com/hiyouga/LLaMA-Efficient-Tuning)
+- [Easy-to-use LLM fine-tuning framework (LLaMA-2, BLOOM, Falcon, Baichuan, Qwen, ChatGLM2)](https://github.com/hiyouga/LLaMA-Factory)
 - https://dstack.ai/examples/finetuning-llama-2
 - https://github.com/h2oai, etc.
 - [The History of Open-Source LLMs: Better Base Models (part 2)](https://cameronrwolfe.substack.com/p/the-history-of-open-source-llms-better) (LLaMA, MPT, Falcon, LLaMA-2)

references.bib

@@ -413,7 +413,7 @@ @online{cursor-llama
 title={Why {GPT-3.5} is (mostly) cheaper than {LLaMA-2}},
 author={Aman},
 year=2023,
-url={https://www.cursor.so/blog/llama-inference}
+url={https://cursor.sh/blog/llama-inference}
 }
 @online{vector-indexing,
 title={Vector databases: Not all indexes are created equal},

references.md

@@ -32,7 +32,7 @@ Couldn't decide which chapter(s) these links are related to. They're mostly abou
 - "How I Re-implemented PyTorch for WebGPU" (`webgpu-torch`: inference & autograd lib to run NNs in browser with negligible overhead) https://praeclarum.org/2023/05/19/webgpu-torch.html
 - "LLaMA from scratch (or how to implement a paper without crying)" (misc tips, scaled-down version of LLaMA for training) https://blog.briankitano.com/llama-from-scratch
 - "Swift Transformers: Run On-Device LLMs in Apple Devices" https://huggingface.co/blog/swift-coreml-llm
-- "Why GPT-3.5-turbo is (mostly) cheaper than LLaMA-2" https://www.cursor.so/blog/llama-inference#user-content-fn-gpt4-leak
+- "Why GPT-3.5-turbo is (mostly) cheaper than LLaMA-2" https://cursor.sh/blog/llama-inference#user-content-fn-gpt4-leak
 - http://marble.onl/posts/why_host_your_own_llm.html
 - https://betterprogramming.pub/you-dont-need-hosted-llms-do-you-1160b2520526
 - "Low-code framework for building custom LLMs, neural networks, and other AI models" https://github.com/ludwig-ai/ludwig