Tungkulin: Full-Stack Engineering (Nilikha ang buong sistema mula sa simula kabilang ang Arkitektura, Backend APIs, State Management, UI/UX, at Audio Integration)
Pangunahing Resulta: Isang nakaka-engganyong, context-aware na V2 chatbot na nagsisilbing pangunahing interactive node ng cyberpunk portfolio
Buod: Isang malalim na integrated na V2 chatbot system para sa Portfolio: Cyberpunk, na binuo bilang malaking ebolusyon mula sa orihinal na V1 Chatbot (Portfolio: Glass). Ginagaya nito ang isang AI construct terminal na pinangalanang "Oz" na nagtatampok ng real-time dubbing, dynamic MCP tool execution sa pamamagitan ng mga ToolBadge indicator, system commands, at active context limit management. Gumagana ito bilang isang ganap na awtonomong ahente na kumakatawan kay Franz.
Ang Problema
Hamon: Ang cyberpunk portfolio ay nangangailangan ng chatbot na mukhang built-in na terminal o AI assistant sa halip na isang simpleng widget na idinagdag sa huli. Hindi tulad ng V1 Glass Chatbot na isang karaniwang conversational interface, ang V2 iteration na ito ay kailangang magproseso ng maramihang system-level commands, mag-render nang biswal ng LLM tool calls (tulad ng pag-navigate o pag-play ng musika), mag-play ng synchronized AI dubbing nang walang audio overlap, at humawak ng context windows nang mahusay.
Audience: Mga technical recruiter, developer, at bisita na nag-e-explore sa portfolio.
Mga Limitasyon: Ang kumplikadong state management na kinasasangkutan ng sound playback, UI layout shifts, user typing, pag-render ng asynchronous tool calls, at API constraints (paghawak sa tokens limit) ay nangangailangan ng maingat na pagpaplano sa arkitektura nang hindi nakompromiso ang 60fps animations.
Diskarte at mga Desisyon
Arkitektura: Pinaghiwalay ang mga bahagi sa mga modular na feature: ChatHeader, ChatInput, ChatMessage, ChatHistory, DubPopup, at ToolBadge. Ginamit ang useChatbotAudio upang ligtas na i-orchestrate ang mga tunog at maiwasan ang spam.
Mga Pangunahing Desisyon:
Pag-execute ng Tool (ToolBadge): Upang gawing nakikita at transparent ang mga aksyon ng AI, binuo ko ang ToolBadge component. Kapag ang AI ay nag-execute ng isang MCP tool (halimbawa, paglipat ng musika, pag-download ng resume, pagbabago ng tema, o pagsasalin ng site), isang makinis at animated na terminal badge ang lalabas sa chat flow na nagdedetalye ng aksyon. Ito ay pangunahing naghihiwalay sa normal na teksto mula sa mga operasyon ng system.
Pagkakakilanlan at Awtonomong Pag-uugali: Gumagana ang AI sa ilalim ng persona na "Oz", na nagsisilbing propesyonal na AI assistant. Dinamiko nitong pinangangasiwaan ang mga kumplikadong workflow tulad ng Pricing Inquiries (pagpapakita ng mga nakatagong internal pricing table) at Contact Form Routing (kung saan nagda-draft si Oz ng mga email para sa mga user ngunit pinipilit silang dumaan sa mahigpit na review-and-approve UI loop).
LLM Engine at Fallback na Arkitektura: Bumuo ng matibay na backend fallback chain. Katutubong pinoproseso nito ang hanggang 1M context tokens gamit ang isang hybrid attention architecture upang suportahan ang pagpapanatili ng mahabang context. Ang mga query ay maayos na lumilipat mula sa mga pangunahing mabilis na modelo pababa sa matibay na mga secondary network kung mangyari ang mga rate-limit o pansamantalang pagkawala.
RAG at Pamamahala ng Context: Gumagamit ito ng RAG (query_portfolio_data) upang kunin ang buong MDX case studies kapag nagtanong ang mga gumagamit ng malalalim na teknikal na katanungan. Ibinabagsak ng isang adaptive sliding window ang mga pinakalumang mensahe kapag umabot na sa 90-98% ng context cap.
Lockdown Moderation: Nagpatupad ng awtomatikong lockdown system kung saan maaaring pansamantalang i-ban ni Oz ang mga user (maikli, katamtaman, o mahabang timeouts) para sa mapang-abusong wika o spam, na ganap na naka-sync sa mga server-side cookies.
Mga Trade-off: Sa halip na gumamit ng Redux para sa kumplikadong state, umasa ako sa React Context at useSyncExternalStore para sa localized state management, na nag-optimize sa laki ng bundle ngunit nangangailangan ng tumpak na disenyo ng hook upang maiwasan ang mga hindi kinakailangang re-renders.
Mga Pangunahing Resulta at Epekto
Kinalabasan: Isang kapansin-pansin at lubos na gumaganang katulong na nagpapahusay sa naratibo ng cyberpunk habang nagbibigay ng tunay na utility (tulad ng pagsagot sa mga tanong, pagkontrol sa musika, at pagpapakita ng mga kasanayan).
Epekto: Ipinapakita ang mga advanced na pattern ng Next.js, system integration sa pamamagitan ng MCP, custom hooks, at tumpak na audio-visual coordination.
Sukatan
Resulta
Pagganap
Na-optimize sa pamamagitan ng lazy loading at mahigpit na mga ref
Interaktibidad
Audio, pagpapatupad ng tool, terminal commands
Resilience
Live context size at API degradation detection
Teknikal na Deep Dive
Mga Kapansin-pansing Detalye:
Sinusubaybayan ang live diagnostics (Round-Trip Time, Active Models, Tokens) nang direkta sa UI.
Ang Tool Call Feature: Ang ToolBadge.tsx component ay nati-trigger sa tuwing ang AI ay nagbabalik ng action object sa halip na simpleng teksto. Pini-parse nito ang parameters ng tool (halimbawa { type: "toggle_theme", theme: "dark" }) at nagre-render ng futuristic na kumikinang na badge na nagbubuod sa isinagawang gawain sa loob ng chat feed.
Custom na TypewriterMarkdown para sa ligtas na pag-render ng markdown na may parang hacker na typewriter effect.
Sinasalamin ng DubPopup visualizer ang mga estado ng "nagsasalitang AI" nang asynchronously batay sa mga pagkilos ng API.
Pag-verify: Bumuo ng matitibay na limitasyon (Lockdown states, spam protection) upang maayos na pangasiwaan ang mapang-abusong paggamit o rate limiting, na sumasalamin nang direkta sa mga configuration ng server sa UI.
Kalidad ng Code: Malawakang paggamit ng mga TypeScript interface para sa ToolDetail, ChatSession, at mahigpit na null checks sa mga ref at visual layout interactions.
Mga Pagninilay
Kung Gagawin Nang Iba: Maaari ko sanang ihiwalay ang audio player engine sa isang generic na worker upang ganap na maalis ang anumang main thread stutters kapag nagde-decode ng mahahabang audio file sa mga mobile device.
Mga Tagumpay: Walang putol na pag-uugnay ng useMusicPlayer context sa mga AI command para ang assistant ay tunay na "makaarte" sa loob ng website, na tumatawid sa hangganan sa pagitan ng chat at site navigation.
Mga Aral: Ang pagbabalanse ng mga "astig" na cyberpunk effects (typewriter, glitched tools) sa accessibility ay nangangailangan ng patuloy na pagsubok. Ang pagdidisenyo ng mga mobile-friendly na floating chat window na may nakapirming pagpoposisyon at scroll lock ay lubos na nakadepende sa mga kakaibang katangian ng browser.
Aking mga Kontribusyon
Arkitektura ng System: Idinisenyo ang chat state engine, logic sa pag-poll para sa live diagnostics, at history ng storage ng session.
Audio Engineering: Pinrograma ang sequence-based na dubbing at sound effect hooks (useChatbotAudio).
UI/UX: Ini-style ang mga component (ChatSettings, ChatInput) gamit ang Tailwind at Framer Motion para sa tunay na terminal-like na hitsura.
Integrasyon: Inimapa ang AI output sa mga naaaksyunang tool (ToolBadge) na nakakaapekto sa mas malawak na app (halimbawa, pagbabago ng wika, pag-download ng resume, pagpapalit ng tema).
Arkitektura ng Proyekto
Ang direktoryo ng components/chatbot/ ay nag-o-orchestrate sa logic ng assistant:
Core Engine: Ang Chatbot.tsx ay gumaganap bilang pangunahing controller.
Mga Component ng UI: ChatMessage.tsx, ChatInput.tsx, ChatHistory.tsx.
Espesyal na Mga Feature: TypewriterMarkdown.tsx para sa visual flair, DubPopup.tsx para sa audio presence, at ToolBadge.tsx para sa mga buod ng tool execution.
Mga Integrasyon: Nagsasama sa mga global na provider (useMusicPlayer, useTheme, useLocale).
Live Preview
Live Demo Link: Damhin ang chatbot nang direkta sa live portfolio site franzdomingo.dev.
Mga feature na susubukan: I-type ang /help para sa mga command, o hilingin itong "Play music" upang makitang ma-trigger ang global music player.
