Differences
This shows you the differences between two versions of the page.
|
se:labs:08 [2024/12/02 21:39] ilie_cristian.sandu [Introduction] |
se:labs:08 [2024/12/02 22:13] (current) ilie_cristian.sandu [Tasks] |
||
|---|---|---|---|
| Line 419: | Line 419: | ||
| ====Overview==== | ====Overview==== | ||
| - | V0 is a visual development platform that enables rapid prototyping and development of user interfaces. It allows developers and designers to create UI components visually, reducing the need for manual coding of UI elements. | + | [[https://v0.dev/chat|V0]] is a visual development platform that enables rapid prototyping and development of user interfaces. It allows developers and designers to create UI components visually, reducing the need for manual coding of UI elements. |
| + | |||
| + | {{:se:labs:v0-1.png?700|V0}} | ||
| ====History==== | ====History==== | ||
| Line 428: | Line 430: | ||
| * **Rapid Prototyping**: V0 allows for quick creation of user interfaces using a visual editor, which speeds up the design and iteration process. | * **Rapid Prototyping**: V0 allows for quick creation of user interfaces using a visual editor, which speeds up the design and iteration process. | ||
| + | {{:se:labs:v0-2.png?700|V0 npm response}} | ||
| * **Collaboration**: Designers and developers can work together seamlessly, as the tool provides a common platform for UI development. | * **Collaboration**: Designers and developers can work together seamlessly, as the tool provides a common platform for UI development. | ||
| * **Code Export**: V0 can export code in various formats (e.g., React components), which can be integrated into existing projects. | * **Code Export**: V0 can export code in various formats (e.g., React components), which can be integrated into existing projects. | ||
| + | {{:se:labs:v0-3.png?700|V0 npm response}} | ||
| ====Usage in the Lab==== | ====Usage in the Lab==== | ||
| Line 439: | Line 443: | ||
| ====Overview==== | ====Overview==== | ||
| - | Cursor is an AI-powered Integrated Development Environment (IDE) designed to enhance developer productivity through intelligent code suggestions and assistance. Cursor uses machine learning models to provide context-aware code completions, refactoring suggestions, and error detection. | + | [[https://www.cursor.com/|Cursor]] is an AI-powered Integrated Development Environment (IDE) designed to enhance developer productivity through intelligent code suggestions and assistance. Cursor uses machine learning models to provide context-aware code completions, refactoring suggestions, and error detection. |
| + | |||
| + | {{:se:labs:cursor-1.png?700|Cursor landing page}} | ||
| ====History==== | ====History==== | ||
| Line 448: | Line 454: | ||
| * **AI-Assisted Coding**: Provides real-time code suggestions based on the context of your current work. | * **AI-Assisted Coding**: Provides real-time code suggestions based on the context of your current work. | ||
| + | {{:se:labs:cursor-2.png?700|Cursor suggestions}} | ||
| + | {{:se:labs:cursor-3.png?700|Cursor knowledge}} | ||
| + | |||
| * **Error Detection and Debugging**: Helps identify potential issues in your code before runtime. | * **Error Detection and Debugging**: Helps identify potential issues in your code before runtime. | ||
| * **Productivity Boost**: Automates repetitive tasks and reduces the cognitive load on developers. | * **Productivity Boost**: Automates repetitive tasks and reduces the cognitive load on developers. | ||
| Line 459: | Line 468: | ||
| ====Overview==== | ====Overview==== | ||
| - | GitHub Copilot is an AI-powered code completion tool developed by GitHub in collaboration with OpenAI. It uses OpenAI's Codex model, which is trained on a vast dataset of public code repositories, to provide code suggestions and generate code snippets based on comments and existing code. | + | [[https://github.com/features/copilot|GitHub Copilot]] is an AI-powered code completion tool developed by GitHub in collaboration with OpenAI. It uses OpenAI's Codex model, which is trained on a vast dataset of public code repositories, to provide code suggestions and generate code snippets based on comments and existing code. |
| + | {{:se:labs:ghcopilot-1.png?700|GitHub copilot}} | ||
| ====History==== | ====History==== | ||
| Line 479: | Line 489: | ||
| ====Overview==== | ====Overview==== | ||
| - | ChatGPT API provides developers with access to OpenAI's powerful language models, such as GPT-3.5 and GPT-4, enabling the integration of natural language understanding and generation into applications. | + | [[https://platform.openai.com/docs/api-reference/introduction|ChatGPT API]] provides developers with access to OpenAI's powerful language models, such as GPT-3.5 and GPT-4, enabling the integration of natural language understanding and generation into applications. |
| + | |||
| ====History==== | ====History==== | ||
| Line 497: | Line 509: | ||
| =====Tasks===== | =====Tasks===== | ||
| - | - Download the generated project se-lab8-tasks.zip (and run //`npm install`// and //`npm run dev`//) | + | - Download the generated project {{:se:labs:se-lab8-tasks.zip|se-lab8-tasks.zip}} (and run **//npm install//** and **//npm run dev//**) |
| - Use **V0** to design the frontend of your chat application. | - Use **V0** to design the frontend of your chat application. | ||
| - Implement the chat logic with help from **Cursor** / **V0** / **Chat GPT** or other tools. | - Implement the chat logic with help from **Cursor** / **V0** / **Chat GPT** or other tools. | ||
| - | - Integrate the **ChatGPT API** to generate responses. | + | - Integrate the [[https://platform.openai.com/docs/api-reference/introduction|ChatGPT API]] to generate responses. |
| - Add a privacy policy/terms of service to your application using a **generative AI tool**. | - Add a privacy policy/terms of service to your application using a **generative AI tool**. | ||
| - **Bonus**: Use AI generated images for your chatbot avatar. | - **Bonus**: Use AI generated images for your chatbot avatar. | ||
| <note tip> | <note tip> | ||
| - | Hint | + | Hint: |
| [[https://leonardo.ai/|Leonardo.AI]], [[https://openai.com/dall-e-2/|DALL-E]], [[https://stability.ai/stable-diffusion|Stable Diffusion]] | [[https://leonardo.ai/|Leonardo.AI]], [[https://openai.com/dall-e-2/|DALL-E]], [[https://stability.ai/stable-diffusion|Stable Diffusion]] | ||
| </note> | </note> | ||
