audio ML

Author: aryan-cs

src/components/Navbar.css

@@ -194,16 +194,15 @@ button, input { font-family: inherit; }
   right: clamp(3.5rem, 8vw, 6.5rem);
   width: 2px;
   height: 4.6rem;
-  background: var(--line);
-  transform-origin: top center;
-  animation: rope-sway 2.6s ease-in-out infinite;
   z-index: 50;
   border: 0;
   padding: 0;
-  background-color: var(--line);
+  background: var(--line);
   appearance: none;
-  cursor: grab;
-  touch-action: none;
+  cursor: pointer;
+  transform-origin: top center;
+  animation: rope-sway 2.6s ease-in-out infinite;
+  will-change: transform;
 }
 
 .projector-pull {
@@ -219,11 +218,6 @@ button, input { font-family: inherit; }
   transform: translate(-50%, -35%);
 }
 
-.projector-rope.is-grabbed {
-  animation-play-state: paused;
-  cursor: grabbing;
-}
-
 .projector-rope::after {
   content: "";
   position: absolute;
@@ -1448,7 +1442,10 @@ button, input { font-family: inherit; }
     grid-template-columns: repeat(2, minmax(0, 1fr));
     padding-right: 0;
   }
-  .projector-rope { right: 2.4rem; height: 3.8rem; }
+  .projector-rope {
+    right: 2.4rem;
+    height: 3.8rem;
+  }
   .topbar { grid-template-columns: 1fr; justify-items: start; }
   .top-menu { display: none; }
   .top-actions { width: 100%; justify-content: flex-end; }

src/components/Navbar.tsx

@@ -19,7 +19,6 @@ import "./Navbar.css";
 
 const OPEN_MS = 900;
 const CLOSE_MS = 680;
-const DRAG_THRESHOLD_PX = 26;
 const TOPIC_MORPH_TIME_MS = 820;
 const TOPIC_SLIDE_TIME_MS = 560;
 const MORPH_BLUR_BASE = 5;
@@ -126,7 +125,6 @@ function Navbar() {
   const initialRouteStatus = resolvePathStatus(initialPathname).status;
   const [topicTransitionMode] = useState(resolveTopicTransitionMode);
   const [screenPhase, setScreenPhase] = useState("closed");
-  const [isRopeGrabbed, setIsRopeGrabbed] = useState(false);
   const [selectedSection, setSelectedSection] = useState(PROJECTOR_SECTIONS[0]);
   const [hoveredSection, setHoveredSection] = useState(null);
   const [displayedSection, setDisplayedSection] = useState(PROJECTOR_SECTIONS[0]);
@@ -164,7 +162,6 @@ function Navbar() {
   const fromTextNodesRef = useRef([]);
   const toTextNodesRef = useRef([]);
   const screenPhaseRef = useRef("closed");
-  const ropeDragRef = useRef({ active: false, pointerId: null, startY: 0, acted: false });
   const subtopicReturnListenersRef = useRef(new WeakMap());
 
   const parseCssNumber = (value, fallback = 0) => {
@@ -687,30 +684,6 @@ function Navbar() {
     openProjectorScreen();
   };
 
-  const startRopeDrag = (event) => {
-    if (event.button !== 0) return;
-    event.currentTarget.setPointerCapture(event.pointerId);
-    ropeDragRef.current = { active: true, pointerId: event.pointerId, startY: event.clientY, acted: false };
-    setIsRopeGrabbed(true);
-  };
-
-  const moveRopeDrag = (event) => {
-    const d = ropeDragRef.current;
-    if (!d.active || d.pointerId !== event.pointerId) return;
-    const deltaY = event.clientY - d.startY;
-    if (deltaY >= DRAG_THRESHOLD_PX && !isOpenLikeNow()) { d.acted = true; d.startY = event.clientY; openProjectorScreen(); return; }
-    if (deltaY <= -DRAG_THRESHOLD_PX && isOpenLikeNow()) { d.acted = true; d.startY = event.clientY; closeProjectorScreen(); }
-  };
-
-  const endRopeDrag = (event, allowTapToggle) => {
-    const d = ropeDragRef.current;
-    if (!d.active || d.pointerId !== event.pointerId) return;
-    if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
-    ropeDragRef.current = { active: false, pointerId: null, startY: 0, acted: false };
-    setIsRopeGrabbed(false);
-    if (allowTapToggle && !d.acted && Math.abs(event.clientY - d.startY) < DRAG_THRESHOLD_PX) toggleProjectorScreen();
-  };
-
   const isSlideMorph = isMorphingTopics && topicTransitionMode === "slide";
   const isGooeyMorph = isMorphingTopics && topicTransitionMode === "gooey";
   const topicStageStyle = {
@@ -852,13 +825,9 @@ function Navbar() {
         </div>
 
         <button
-          className={`projector-rope${isRopeGrabbed ? " is-grabbed" : ""}`}
+          className="projector-rope"
           type="button"
-          onPointerDown={startRopeDrag}
-          onPointerMove={moveRopeDrag}
-          onPointerUp={(e) => endRopeDrag(e, true)}
-          onPointerCancel={(e) => endRopeDrag(e, false)}
-          onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleProjectorScreen(); } }}
+          onClick={toggleProjectorScreen}
           aria-pressed={isOpenLike}
           aria-label={isOpenLike ? "Roll up projector screen" : "Pull down projector screen"}
         >

src/engine/Lessons.tsx

@@ -11,12 +11,14 @@ export const PROJECTOR_SECTIONS = [
 export const PROJECTOR_TOPICS = {
   Fundamentals: [
     {
-      topic: "Orientation",
+      topic: "Intelligent Systems",
       subtopics: [
-        "What Really Is Machine Learning?",
-        "AI vs ML vs DL",
+        "What Is Machine Learning",
+        "AI vs ML vs Deep Learning",
         "Types of Learning Problems",
-        "Where Machine Learning Is Used Today",
+        "How Models Learn",
+        "The ML Workflow",
+        "Where ML Is Used Today",
       ],
     },
     {
@@ -365,11 +367,13 @@ export const PROJECTOR_TOPICS = {
       ],
     },
     {
-      topic: "Multimodal & Vision-Language",
+      topic: "Multimodal Learning",
       subtopics: [
-        "VLM Backbones",
-        "Fusion Methods",
-        "Crossmodal Tasks",
+        "Vision-Language Backbones",
+        "Audio Representations",
+        "Cross-Modal Fusion",
+        "Cross-Modal Alignment",
+        "Multimodal Generation",
       ],
     },
     {
@@ -399,7 +403,7 @@ export const PROJECTOR_TOPICS = {
       ],
     },
     {
-      topic: "Frameworks & Tools",
+      topic: "ML Frameworks & Tools",
       subtopics: [
         "PyTorch Stack",
         "TensorFlow & JAX",
@@ -493,6 +497,16 @@ export const PROJECTOR_TOPICS = {
         "Inference Tasks & Metrics",
       ],
     },
+    {
+      topic: "Speech & Audio",
+      subtopics: [
+        "Audio Representations & Spectrograms",
+        "Speech Recognition",
+        "Text-to-Speech & Neural Vocoders",
+        "Audio Generation",
+        "Audio Understanding",
+      ],
+    },
     {
       topic: "Time Series Learning",
       subtopics: [