현대적인 AI 어시스턴트를 만들었습니다
대부분의 AI 튜토리얼은 너무 단순합니다. 기본적인 API 호출과 응답만을 보여주죠. 저는 실제 애플리케이션을 만들고 싶었습니다.
저는 vanilla HTML, CSS, JavaScript를 사용하여 AI 어시스턴트를 구축했습니다.
주요 기능:
- 스트리밍 응답.
- 다크 모드 및 라이트 모드.
- 마크다운 및 구문 강조(syntax highlighting).
- 채팅 기록 유지.
- 에러 처리 및 재시도 로직.
기술 스택:
- HTML5 및 CSS3.
- Vanilla JavaScript.
- Marked.js 및 Prism.js.
- 보안을 위한 DOMPurify.
- Google Generative AI SDK.
- 호스팅을 위한 GitHub Pages.
보안은 최우선 사항입니다. AI 응답을 정화하기 위해 DOMPurify를 사용했습니다. 이는 보안 리스크를 방지합니다.
사용자 경험(UX)이 중요합니다. 스트리밍 콘텐츠를 추가했습니다. 사용자는 텍스트가 생성되는 대로 볼 수 있습니다. 로딩 아이콘을 기다릴 필요가 없습니다.
채팅 기록에는 localStorage를 사용했습니다. 덕분에 앱이 빠르며, 별도의 백엔드가 필요하지 않습니다.
배운 점:
- 예외 케이스(edge cases) 해결.
- UX에 집중.
- 상태 관리.
- AI 출력물 보안.
이러한 세부 사항들이 AI 모델보다 더 중요합니다.
포트폴리오를 위해 이런 프로젝트를 만들어 보세요. API, UI 디자인, 상태 관리를 배울 수 있습니다.
어떤 기능을 추가하고 싶으신가요?
- 음성 입력.
- 파일 업로드.
- 메모리.
댓글로 알려주세요.
Source: https://dev.to/codehuntersharath/i-built-a-modern-ai-assistant-using-html-css-and-javascript-4ca8 Video: https://youtu.be/nbFKG_6DkSE Optional learning community: https://t.me/GyaanSetuAi