The latest articles on DEV Community by Nicolas Molina Monroy (@nicobytes). https://dev.to/nicobytes https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F105981%2F08a9a3f2-d893-4922-a394-3c64126ec0e3.jpg https://dev.to/nicobytes en Nicolas Molina Monroy Mon, 15 Apr 2024 05:59:43 +0000 https://dev.to/nicobytes/ai-interview-simulator-48e1 https://dev.to/nicobytes/ai-interview-simulator-48e1 <p><em>This is a submission for the <a href="https://dev.to/devteam/join-us-for-the-cloudflare-ai-challenge-3000-in-prizes-5f99">Cloudflare AI Challenge</a>.</em></p> <h2> What I Built </h2> <p>AI Interview Simulator is an web application designed to improve your interview preparation. Using AI technology, it analyzes your answers and provides constructive feedback on how to improve. Using your device's camera and microphone, this tool provides a comprehensive, real-time assessment to help you excel in your next interview.</p> <h2> Demo </h2> <p><a href="https://interview.nicobytes.com/" rel="noopener noreferrer">https://interview.nicobytes.com/</a></p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FCNwYh18.jpeg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FCNwYh18.jpeg" alt="AI Interview Simulator"></a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FQG1QYYL.jpeg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FQG1QYYL.jpeg" alt="AI Interview Simulator"></a><br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2F0qH0sCv.jpeg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2F0qH0sCv.jpeg" alt="AI Interview Simulator"></a></p> <h2> My Code </h2> <p><a href="https://github.com/nicobytes/interview-cloudflare-ai" rel="noopener noreferrer">https://github.com/nicobytes/interview-cloudflare-ai</a></p> <h2> Journey </h2> <p>Unfortunately, the company I was working for had a layoff, so I am constantly looking for my next position, but the hiring process is different at every company. But I have found that there are common questions asked in every interview, and I have started to write down these questions to improve for my next interviews. As part of the hiring process, some companies ask you to record a video answering some questions, and this process can be intimidating. Inspired by this, I created an AI interview simulator that generates questions based on your role and provides feedback using your phone and camera to give you a close experience to real interviews.</p> <p>The application features an Angular-based frontend, utilizing Tailwind CSS for styling and Angular CDK for component primitives, enhancing the UI development process. The backend is powered by HonoJS, a lightweight JavaScript framework, and integrates LangChainJS to manage interactions with large language models efficiently. For the infrastructure, the app leverages Cloudflare's ecosystem: Cloudflare Pages for hosting, Cloudflare Workers for edge functions, and Workers AI Models including <code>@cf/openai/whisper</code> for audio processing, <code>@cf/meta/llama-2-7b-chat-fp16</code> for chat functionalities, and openai-tts for text-to-speech capabilities. Data storage is handled via Cloudflare R2, and D1 provides a scalable database solution for managing chat memories and other data needs. </p> <p><strong>Multiple Models and/or Triple Task Types</strong></p> <ul> <li>Automatic Speech Recognition: <code>@cf/openai/whisper</code> </li> <li>Text Generation: <code>@cf/meta/llama-2-7b-chat-fp16</code> </li> <li>Text to speech: Open AI</li> <li>Cloudfare AI Gateway</li> </ul> cloudflarechallenge devchallenge ai