Show page

Differences

This shows you the differences between two versions of the page.

--- se:labs:08 [2023/12/05 19:26]
avner.solomon
+++ se:labs:08 [2024/12/02 22:13] (current)
ilie_cristian.sandu [Tasks]
@@ Line 1: / Line 1: @@
-====== Lab 08 - Backend ======
+====== Lab 08 - AI Tools ======
+<hidden>
 === Introduction ===
@@ Line 59: / Line 59: @@
 // Connect to MongoDB database using a MongoDB client for Node
 let db
-const client = new mongodb.MongoClient.connect('mongodb://localhost:27017/')
+const client = new mongodb.MongoClient('mongodb://localhost:27017/')
+client.connect()
 const connectToDB = async () => {
     await client.connect()
@@ Line 78: / Line 79: @@
 app.get('/api/tasks', async (req, res) => {
     //Find all documents in the tasks collection and returns them as an array.
-    return {
+    return res.json({
         tasks: await db.collection('tasks').find().toArray()
-    }
+    })
 })
@@ Line 182: / Line 183: @@
 let db   //our db instance
-mongodb.MongoClient.connect('mongodb://localhost:27017/', (err, client) => {
+const client = new mongodb.MongoClient('mongodb://localhost:27017/')
-    // connecting to our local database using the MongoDB client for Node
+client.connect()
-    if (err) return console.log(err)
+const connectToDB = async () => {
+    await client.connect()
     console.log('Connected to database')
-    // get our db instance
+    db = client.db('university-db')
-    db = client.db('university-db');
+}
-})
+connectToDB()
 </code>
@@ Line 202: / Line 204: @@
 let db
-mongodb.MongoClient.connect('mongodb+srv://<user>:<parola>@cluster......mongodb.net/?retryWrites=true&w=majority', (err, client) => {
+const client = new mongodb.MongoClient.connect(''mongodb+srv://<user>:<parola>@cluster......mongodb.net/?retryWrites=true&w=majority')
-    if (err) return console.log(err)
+const connectToDB = async () => {
+    await client.connect()
     console.log('Connected to database')
-    db = client.db('university-db');
+    db = client.db('university-db')
-})
+}
+connectToDB()
 </code>
@@ Line 212: / Line 216: @@
 <code javascript>
-server.get('/api/tasks', (req, res) => {
+server.get('/api/tasks', async (req, res) => {
-    db.collection('tasks').find().toArray((err, result) => {
+    return res.send({
-        if (err) return console.log(err)
+        tasks: await db.collection('tasks').find().toArray()
-        res.send({
-            tasks: result
-        })
     })
 })
@@ Line 231: / Line 232: @@
 <code javascript>
-db.collection('tasks').find().toArray((err, result) => {
+const documents = await db.collection('tasks').find().toArray()
-    if (err) return console.log(err)
-    //do something with result
-    console.log(result)
-})
 </code>
 If we want to get a single document we can do it using its **id** (or any other field), the next code snippet will find the document with id 123:
 <code javascript>
-db.collection('tasks').findOne({"_id": 123}).then((err, result) => {
+const doc = await db.collection('tasks').findOne({"_id": 123})
-    if (err) return console.log(err)
-    //do something with result
-    console.log(result)
-})
 </code>
@@ Line 250: / Line 243: @@
 <code javascript>
-db.collection('tasks').find({ qty: { $gt: 4 } }).toArray((err, result) => {
+const docs = aiwat db.collection('tasks').find({ qty: { $gt: 4 } }).toArray()
-    if (err) return console.log(err)
-    //do something with result
-    console.log(result)
-})
 </code>
@@ Line 260: / Line 249: @@
 <code javascript>
-db.collection('tasks').updateOne(
+await db.collection('tasks').updateOne(
     { _id: 1 },
     { $set: {
@@ Line 273: / Line 262: @@
 <code javascript>
-db.collection('tasks').deleteOne(
+await db.collection('tasks').deleteOne(
     { title: "ABC123" }
 )
@@ Line 351: / Line 340: @@
 Please take a minute to fill in the **[[https://forms.gle/PNZYNNZFrVChLjag8 | feedback form]]** for this lab.
+</hidden>
+=====Introduction=====
+In this lab, we will explore __AI-driven development tools__ and their applications in building modern web applications. You will learn about the following tools:
+  * **Generative AI**: The broader category of AI technologies that includes tools like ChatGPT, Gemini, and Claude.
+  * **V0**: A tool for rapid UI prototyping and component generation.
+  * **Cursor**: An AI powered IDE for coding and debugging.
+  * **ChatGPT API**: A conversational AI API for natural language processing.
+  * **GitHub Copilot**: An AI coding assistant for accelerating development.
+By the end of this lab, you will build a simple Next.js chat application that integrates the ChatGPT API, with UI components created using V0 and all of this logic implemented using Cursor as IDE.
+=====What is Generative AI?====
+Generative AI refers to artificial intelligence systems that can generate new content, such as text, images, videos, or audio, based on patterns they’ve learned from existing data. Unlike traditional AI models that classify or predict based on input data, generative AI creates new and unique outputs.
+Core Capabilities
+  * **Text Generation**: Writing human-like text for applications like chatbots, content creation, and summarization.
+  * **Image and Video Generation**: Creating visuals with tools like DALL-E and Stable Diffusion.
+  * **Audio Generation**: Composing music or synthesizing realistic human speech.
+Applications of Generative AI
+  * **Chatbots and Virtual Assistants**: Used in customer service and personal assistants (e.g., ChatGPT, Alexa).
+  * **Content Creation**: Writing articles, generating designs, or producing marketing materials.
+  * **Creative Tools**: Assisting artists, musicians, and designers in generating innovative ideas and assets.
+====ChatGPT====
+**Overview**
+ChatGPT is one of the most well-known examples of generative AI, developed by OpenAI. It uses large language models like GPT-3.5 and GPT-4 to understand and generate human-like text. ChatGPT is versatile and can handle tasks ranging from answering questions to writing essays or generating code.
+===Key Features===
+  * **Human-Like Conversations**: Engages in meaningful and context-aware discussions.
+  * **Flexibility**: Supports various use cases, including education, entertainment, and business.
+  * **Customization**: Can be tailored to specific tasks with system prompts and fine-tuning.
+====Gemini====
+**Overview**
+Gemini is Google's generative AI model, designed to combine advanced language understanding with cutting-edge capabilities in vision and multimodal reasoning. Released as part of Google DeepMind's AI ecosystem, Gemini aims to bring generative AI into various professional and creative domains.
+===Key Features===
+  * **Multimodal Capabilities**: Understands and generates content across text, images, and other formats.
+  * **Enterprise Integration**: Tailored for applications in business, including document analysis and automation.
+  * **Advanced Context Understanding**: Excels in maintaining context across complex interactions.
+====Claude====
+**Overview**
+Claude is a conversational AI developed by Anthropic, designed with a focus on safety, ethical behavior, and robust reasoning. It competes with ChatGPT in providing conversational and creative AI solutions.
+===Key Features===
+  * **Safety-Oriented Design**: Built with principles to minimize harmful outputs and prioritize ethical usage.
+  * **Context Handling**: Handles long and complex conversations effectively.
+  * **Business Applications**: Supports automation, knowledge retrieval, and customer engagement.
+====Comparison of ChatGPT, Gemini, and Claude====
+^ Feature           ^ ChatGPT                          ^ Gemini                           ^ Claude                          ^
+^ Developer         | OpenAI                           | Google DeepMind                  | Anthropic                       |
+^ Key Strength      | Versatility in text generation   | Multimodal capabilities          | Safety and ethical alignment    |
+^ Target Audience   | General-purpose, developers      | Businesses, creators             | Businesses, ethical users       |
+^ Notable Use Cases | Chatbots, education, programming | Image-text applications, content | Customer service, knowledge ops |
+=====V0=====
+====Overview====
+[[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====
+V0 emerged in the landscape of low-code/no-code development tools, which have gained popularity in recent years to bridge the gap between design and development. The goal of such tools is to accelerate the development process and make it accessible to a wider audience, including those with limited coding experience.
+====Key Benefits====
+  * **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.
+  * **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====
+In this lab, you will use V0 to design the frontend of your chat application, creating components like the chat window, input field, and send button. This will allow you to focus on functionality without spending excessive time on UI coding.
+=====Cursor=====
+====Overview====
+[[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====
+The development of Cursor is part of the broader trend of integrating AI into software development tools. With advances in machine learning and natural language processing, tools like Cursor aim to augment the capabilities of developers, allowing them to write code more efficiently and with fewer errors.
+====Key Features====
+  * **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.
+  * **Productivity Boost**: Automates repetitive tasks and reduces the cognitive load on developers.
+====Usage in the Lab====
+You will use Cursor to implement your chat application. The AI assistance will help you write efficient code.
+=====GitHub Copilot=====
+====Overview====
+[[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====
+Released in technical preview in June 2021, GitHub Copilot represents a significant advancement in AI-assisted programming. It aims to assist developers by suggesting code snippets and functions, thereby reducing the amount of boilerplate code they need to write manually.
+====Key Features====
+  * **Intelligent Code Suggestions**: Generates code based on context, comments, and function names.
+  * **Support for Multiple Languages**: Works with various programming languages, including Python, JavaScript, TypeScript, Ruby, and Go.
+  * **Learning from Context**: Adapts to the coding style and patterns of the developer over time.
+====Usage in the Lab====
+While GitHub Copilot is not a primary tool in this lab, it can be used to assist with coding tasks, providing suggestions and speeding up development as you work on your project.
+=====ChatGPT API=====
+====Overview====
+[[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====
+OpenAI released GPT-3 in June 2020, which was followed by the development of ChatGPT, a model fine-tuned for conversational interactions. The ChatGPT API was made available to developers to harness the capabilities of these models in their own applications, allowing for a wide range of use cases, from chatbots to content generation.
+====Key Features====
+  * **Natural Language Understanding**: Capable of interpreting and processing human language input.
+  * **Conversational Responses**: Generates coherent and contextually appropriate responses in a conversational format.
+  * **Customization**: Developers can guide the model's behavior using system prompts and parameters.
+====Usage in the Lab====
+You will integrate the ChatGPT API into your chat application, allowing it to generate AI-driven responses to user inputs.
+=====Tasks=====
+  - 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.
+  - Implement the chat logic with help from **Cursor** / **V0** / **Chat GPT** or other tools.
+  - 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**.
+  - **Bonus**: Use AI generated images for your chatbot avatar.
+<note tip>
+Hint:
+[[https://leonardo.ai/|Leonardo.AI]], [[https://openai.com/dall-e-2/|DALL-E]], [[https://stability.ai/stable-diffusion|Stable Diffusion]]
+</note>

General Information

Lectures

Labs

Resources

Assignment

Project

se/labs/08.1701797198.txt.gz · Last modified: 2023/12/05 19:26 by avner.solomon

Show page Old revisions

Media Manager Back to top