Hugging Face's logo

Spaces:
AashishAIHub
/
DataScience
Running

App Files Community
AashishAIHub commited on
Commit
b97efb5
·
1 Parent(s): 20661cf

feat: finalized all 9 lecture diagrams for CME 295 with high-fidelity SVGs

Browse files
Files changed (1) hide show
  1. CME295-Transformers/index.html +79 -7
CME295-Transformers/index.html CHANGED
@@ -833,19 +833,91 @@
833
  </div>
834
  <div class="list-item">
835
  <div class="list-num">03</div>
836
- <div><strong>Continuous Batching:</strong> Unlike static batching where the user must wait for all requests in a batch to finish, continuous batching allows new requests to be added to the running batch as soon as any request generates a "Stop" token.</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
837
  </div>
838
  <div class="list-item">
839
- <div class="list-num">02</div>
840
- <div><strong>Temperature & Sampling:</strong> LLMs output a probability distribution over the vocabulary. <code>Temperature=0.0</code> picks the absolute most likely token every time (greedy decoding, factual). <code>Temperature=0.8</code> introduces weighted randomness.</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
841
  </div>
842
  <div class="list-item">
843
- <div class="list-num">03</div>
844
- <div><strong>Few-Shot Prompting & In-Context Learning:</strong> LLMs can temporarily learn a new task simply by being shown 2-3 examples within the prompt. They don't change weights; they deduce the pattern dynamically.</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
845
  </div>
846
  <div class="list-item">
847
- <div class="list-num">04</div>
848
- <div><strong>Chain of Thought (CoT):</strong> Forcing the AI to explain its math/logic step-by-step prior to outputting an answer prevents it from jumping to incorrect sequential conclusions.</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
849
  </div>
850
  `,
851
  math:`
 
833
  </div>
834
  <div class="list-item">
835
  <div class="list-num">03</div>
836
+ <div>
837
+ <strong>Continuous Batching:</strong> Dynamic request handling in production.
838
+
839
+ <div class="visual-demo" style="margin-top: 15px; background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px; border: 1px solid var(--green);">
840
+ <h4 style="color: var(--green); margin-bottom: 10px; font-size: 0.85em;">Static vs. Continuous Batching</h4>
841
+ <svg viewBox="0 0 400 120" style="width: 100%; height: auto;">
842
+ <!-- Static -->
843
+ <text x="20" y="20" fill="var(--text-dim)" font-size="10">Static (Wait for all)</text>
844
+ <rect x="25" y="30" width="100" height="20" fill="rgba(231, 76, 60, 0.3)" stroke="#e74c3c" />
845
+ <text x="35" y="44" fill="var(--text)" font-size="9">Req A, B, C...</text>
846
+
847
+ <!-- Continuous -->
848
+ <text x="220" y="20" fill="var(--green)" font-size="10">Continuous (Fill voids)</text>
849
+ <rect x="225" y="30" width="60" height="20" fill="var(--green)" opacity="0.3" stroke="var(--green)" />
850
+ <text x="230" y="44" fill="var(--text)" font-size="9">Req A (End)</text>
851
+ <rect x="290" y="30" width="60" height="20" fill="var(--cyan)" opacity="0.3" stroke="var(--cyan)" />
852
+ <text x="295" y="44" fill="var(--text)" font-size="9">Req D (New)</text>
853
+ <path d="M 285 55 L 290 30" stroke="var(--green)" stroke-dasharray="2" marker-end="url(#arrow-green)" />
854
+ </svg>
855
+ <p style="font-size: 0.75em; color: var(--text-dim);">Continuous batching injects new requests into the batch as soon as others finish, maximizing GPU utilization.</p>
856
+ </div>
857
+ </div>
858
  </div>
859
  <div class="list-item">
860
+ <div class="list-num">04</div>
861
+ <div>
862
+ <strong>Temperature & Sampling:</strong> Probability sharpening.
863
+
864
+ <div class="visual-demo" style="margin-top: 15px; background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px; border: 1px solid var(--orange);">
865
+ <h4 style="color: var(--orange); margin-bottom: 10px; font-size: 0.85em;">Effect of Temperature (T)</h4>
866
+ <svg viewBox="0 0 400 100" style="width: 100%; height: auto;">
867
+ <!-- T=0.1 -->
868
+ <text x="20" y="20" fill="var(--text-dim)" font-size="10">T=0.1 (Factual)</text>
869
+ <path d="M 25 80 L 40 20 L 55 80" stroke="var(--orange)" stroke-width="2" fill="none" />
870
+ <text x="35" y="95" fill="var(--orange)" font-size="9">Sharp Peak</text>
871
+
872
+ <!-- T=1.0 -->
873
+ <text x="160" y="20" fill="var(--text-dim)" font-size="10">T=1.0 (Balanced)</text>
874
+ <path d="M 165 80 Q 200 40 235 80" stroke="var(--cyan)" stroke-width="2" fill="none" />
875
+
876
+ <!-- T=2.0 -->
877
+ <text x="300" y="20" fill="var(--text-dim)" font-size="10">T=2.0 (Creative)</text>
878
+ <path d="M 305 75 Q 350 70 395 75" stroke="#e74c3c" stroke-width="2" fill="none" />
879
+ <text x="315" y="95" fill="#e74c3c" font-size="9">Uniform/Flat</text>
880
+ </svg>
881
+ <p style="font-size: 0.75em; color: var(--text-dim);">Low temperature concentrates probability on the top token; high temperature distributes it across many options.</p>
882
+ </div>
883
+ </div>
884
  </div>
885
  <div class="list-item">
886
+ <div class="list-num">05</div>
887
+ <div>
888
+ <strong>Few-Shot Prompting:</strong> In-context learning via demonstration.
889
+
890
+ <div class="visual-demo" style="margin-top: 15px; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 8px; border: 1px solid var(--cyan);">
891
+ <h4 style="color: var(--cyan); margin-bottom: 10px; font-size: 0.85em;">Few-Shot Prompt Structure</h4>
892
+ <svg viewBox="0 0 400 100" style="width: 100%; height: auto;">
893
+ <rect x="20" y="10" width="360" height="80" rx="4" fill="var(--surface)" stroke="var(--cyan)" />
894
+ <text x="30" y="30" fill="var(--text)" font-size="10">Input: Dog -> Output: Animal</text>
895
+ <text x="30" y="50" fill="var(--text)" font-size="10">Input: Car -> Output: Transport</text>
896
+ <line x1="30" y1="60" x2="370" y2="60" stroke="var(--cyan)" opacity="0.3" />
897
+ <text x="30" y="80" fill="var(--orange)" font-size="10" font-weight="bold">Input: Apple -> Output: [Model Predicts...]</text>
898
+ </svg>
899
+ </div>
900
+ </div>
901
  </div>
902
  <div class="list-item">
903
+ <div class="list-num">06</div>
904
+ <div>
905
+ <strong>Chain of Thought (CoT):</strong> Step-by-step logic exploration.
906
+
907
+ <div class="visual-demo" style="margin-top: 15px; background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px; border: 1px solid var(--yellow);">
908
+ <h4 style="color: var(--yellow); margin-bottom: 10px; font-size: 0.85em;">Reasoning Search Tree</h4>
909
+ <svg viewBox="0 0 400 120" style="width: 100%; height: auto;">
910
+ <circle cx="200" cy="20" r="10" fill="var(--cyan)" />
911
+ <path d="M 195 30 L 150 60" stroke="var(--yellow)" />
912
+ <path d="M 205 30 L 250 60" stroke="var(--yellow)" />
913
+ <circle cx="150" cy="70" r="10" fill="var(--surface)" stroke="var(--yellow)" />
914
+ <circle cx="250" cy="70" r="10" fill="var(--green)" />
915
+ <path d="M 250 80 L 250 100" stroke="var(--green)" marker-end="url(#arrow-green)" />
916
+ <text x="210" y="115" fill="var(--green)" font-size="10">Optimal Logic Path Found</text>
917
+ </svg>
918
+ <p style="font-size: 0.75em; color: var(--text-dim);">The model explores paths (thoughts), rejects bad ones, and follows the correct logical chain.</p>
919
+ </div>
920
+ </div>
921
  </div>
922
  `,
923
  math:`