Differences
This shows you the differences between two versions of the page.
|
se:labs:08 [2024/12/02 22:00] ilie_cristian.sandu [Tasks] |
se:labs:08 [2025/11/24 22:23] (current) ilie_cristian.sandu [Introduction] |
||
|---|---|---|---|
| Line 347: | Line 347: | ||
| * **Generative AI**: The broader category of AI technologies that includes tools like ChatGPT, Gemini, and Claude. | * **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. | + | * **Prompting strategies**: How to ask generative AI the “right kind” of questions — by defining roles, goals, constraints, and output formats — in order to obtain useful, actionable answers. |
| + | * **V0/Lovable**: A tool for rapid UI prototyping and component generation. | ||
| * **Cursor**: An AI powered IDE for coding and debugging. | * **Cursor**: An AI powered IDE for coding and debugging. | ||
| * **ChatGPT API**: A conversational AI API for natural language processing. | * **ChatGPT API**: A conversational AI API for natural language processing. | ||
| * **GitHub Copilot**: An AI coding assistant for accelerating development. | * **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. | + | By the end of this lab, you will build a simple Next.js chat application, with UI components created using V0/Lovable and all of this logic implemented using Cursor (or other AI powered IDE). |
| =====What is Generative AI?==== | =====What is Generative AI?==== | ||
| Line 414: | Line 415: | ||
| ^ Target Audience | General-purpose, developers | Businesses, creators | Businesses, ethical users | | ^ Target Audience | General-purpose, developers | Businesses, creators | Businesses, ethical users | | ||
| ^ Notable Use Cases | Chatbots, education, programming | Image-text applications, content | Customer service, knowledge ops | | ^ Notable Use Cases | Chatbots, education, programming | Image-text applications, content | Customer service, knowledge ops | | ||
| + | |||
| + | =====Using Generative AI Effectively: How to Ask Good Questions===== | ||
| + | |||
| + | Generative AI tools (such as ChatGPT, Gemini, Claude, etc.) are only as useful as the questions you ask them. This section presents simple prompting strategies that help you obtain clearer, more actionable answers — whether you are coding, learning a new topic, writing, or planning a project. | ||
| + | |||
| + | ====1. Start with a clear objective==== | ||
| + | |||
| + | Avoid very generic questions like: | ||
| + | |||
| + | * “Explain this.” | ||
| + | * “Help me with my project.” | ||
| + | |||
| + | Instead, tell the AI exactly what you want: | ||
| + | |||
| + | * “Explain this concept so that a first-year CS student can understand it.” | ||
| + | * “Help me refactor this function to be easier to read and test.” | ||
| + | * “Suggest a study plan for passing an algorithms exam in 3 weeks.” | ||
| + | |||
| + | You can think in terms of: | ||
| + | |||
| + | * **Goal** – What do you want at the end? (e.g. explanation, plan, piece of code, checklist) | ||
| + | * **Domain** – What is this about? (e.g. web development, statistics, writing) | ||
| + | * **Action** – What should the AI do? (explain, summarise, compare, generate, debug, critique, etc.) | ||
| + | |||
| + | ====2. Give context, not just a question==== | ||
| + | |||
| + | The same question can have very different good answers depending on context. For example, instead of: | ||
| + | |||
| + | * “Explain React hooks.” | ||
| + | |||
| + | you can say: | ||
| + | |||
| + | * “Explain React hooks to someone who already knows basic JavaScript but has never used React. Focus on useState and useEffect, and give one short code example for each.” | ||
| + | |||
| + | Useful types of context: | ||
| + | |||
| + | * **Your current level**: beginner / intermediate / advanced | ||
| + | * **What you already know**: “I know X, but I am confused about Y” | ||
| + | * **Where it will be used**: exam prep, documentation, class presentation, code in a specific project | ||
| + | |||
| + | The more relevant context you give, the more tailored the answer will be. | ||
| + | |||
| + | ====3. Define a role for the AI==== | ||
| + | |||
| + | You can ask the AI to “act as” a particular kind of expert. This helps it tune the style and level of the response. | ||
| + | |||
| + | Examples: | ||
| + | |||
| + | * “Act as a university teaching assistant for a programming course.” | ||
| + | * “Act as a senior backend engineer reviewing my Java code.” | ||
| + | * “Act as an English teacher helping me improve my writing.” | ||
| + | |||
| + | This does not change the underlying model, but it often leads to more useful answers, especially for explanations or feedback. | ||
| + | |||
| + | ====4. Specify constraints and output format==== | ||
| + | |||
| + | If you know how you want the answer to look, say it explicitly. | ||
| + | |||
| + | Examples of constraints: | ||
| + | |||
| + | * Length: “Keep the answer under 10 bullet points.” | ||
| + | * Style: “Use simple language and avoid jargon.” | ||
| + | * Time/space: “Explain this in a way that would fit on a slide.” | ||
| + | |||
| + | Examples of output formats: | ||
| + | |||
| + | * “Answer as a list of bullet points.” | ||
| + | * “Output a step-by-step plan numbered 1, 2, 3…” | ||
| + | * “Return the result as JSON with fields `name`, `description`, and `difficulty`.” | ||
| + | * “Show the final answer first, then a short explanation.” | ||
| + | |||
| + | This is especially useful when you plan to copy the answer into code, documentation, slides or another tool. | ||
| + | |||
| + | ====5. Ask for structure and depth==== | ||
| + | |||
| + | You can ask the AI to structure the answer in multiple layers: | ||
| + | |||
| + | * “First give a short summary (3 bullet points), then a more detailed explanation.” | ||
| + | * “List the main ideas first, then examples for each idea.” | ||
| + | * “Provide a high-level explanation, followed by a concrete example.” | ||
| + | |||
| + | This helps you quickly get an overview, and then dive deeper only if needed. | ||
| + | |||
| + | ====6. Work iteratively (use follow-up questions)==== | ||
| + | |||
| + | Good use of AI is rarely “one prompt and done”. Treat the AI as a collaborator and refine the answer: | ||
| + | |||
| + | * “This is good, but explain point 3 in more detail.” | ||
| + | * “Can you give a simpler example?” | ||
| + | * “Rewrite this explanation as if I were 15 years old.” | ||
| + | * “Can you show the same function, but in TypeScript instead of JavaScript?” | ||
| + | |||
| + | Each follow-up can: | ||
| + | |||
| + | * clarify something you did not understand, | ||
| + | * adapt the answer for a different audience, | ||
| + | * or focus on the part that matters most to you. | ||
| + | |||
| + | ====7. Ask for assumptions and limitations==== | ||
| + | |||
| + | Generative AI can be wrong or incomplete. You can explicitly ask it to show its own uncertainty: | ||
| + | |||
| + | * “List the assumptions you are making in this answer.” | ||
| + | * “Tell me what information you are missing that could change the answer.” | ||
| + | * “Highlight which parts of this answer might be less reliable.” | ||
| + | |||
| + | This is useful when you use AI for decisions, research, or learning and want to be aware of possible gaps. | ||
| + | |||
| + | ====8. Examples of good general-purpose prompts==== | ||
| + | |||
| + | Below are several example prompts you can adapt for your own use. | ||
| + | |||
| + | **a) Learning a new concept** | ||
| + | |||
| + | > Act as a university tutor in computer science. | ||
| + | > I am trying to understand [concept]. | ||
| + | > 1) Explain it in simple terms. | ||
| + | > 2) Give a small concrete example. | ||
| + | > 3) Mention the most common mistakes students make with this concept. | ||
| + | > Keep the explanation under 15 lines. | ||
| + | |||
| + | **b) Asking for code help** | ||
| + | |||
| + | > Act as a senior [language/framework] developer. | ||
| + | > I will paste a piece of code. | ||
| + | > Tasks: | ||
| + | > 1) Explain what the code does. | ||
| + | > 2) Point out any potential bugs or edge cases. | ||
| + | > 3) Suggest improvements for readability and structure. | ||
| + | > 4) Show an improved version of the code. | ||
| + | |||
| + | **c) Improving a piece of writing** | ||
| + | |||
| + | > Act as an editor. | ||
| + | > I will paste a short text in English. | ||
| + | > Improve grammar, clarity, and style, but keep my original meaning and tone. | ||
| + | > Then briefly explain the most important changes you made. | ||
| + | |||
| + | **d) Planning and organisation** | ||
| + | |||
| + | > Act as a study coach. | ||
| + | > I need to prepare for an exam in [subject] in 3 weeks. | ||
| + | > I can study about 1.5 hours per day. | ||
| + | > Create a weekly study plan with concrete tasks for each day. | ||
| + | > At the end, list 3 tips on how to stay consistent. | ||
| + | |||
| + | These examples illustrate the typical structure of a good prompt: | ||
| + | |||
| + | * define a **role** (“act as …”), | ||
| + | * provide enough **context** (level, constraints, domain), | ||
| + | * specify clear **tasks**, and | ||
| + | * optionally request a specific **output format**. | ||
| + | |||
| + | Using these strategies will make generative AI a much more effective assistant for your projects, studies, and everyday tasks. | ||
| + | |||
| =====V0===== | =====V0===== | ||
| Line 419: | Line 575: | ||
| ====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. |
| + | (similar tools: [[https://lovable.dev/|lovable]], [[https://bolt.new/|bolt.new]], [[https://replit.com/|Replit AI]]) | ||
| {{:se:labs:v0-1.png?700|V0}} | {{:se:labs:v0-1.png?700|V0}} | ||
| Line 443: | Line 600: | ||
| ====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}} | {{:se:labs:cursor-1.png?700|Cursor landing page}} | ||
| Line 468: | Line 625: | ||
| ====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. Now copilot support multiple LLM's from OpenAI, Antropic or Google |
| + | {{:se:labs:ghcopilot-1.png?700|GitHub copilot}} | ||
| ====History==== | ====History==== | ||
| Line 488: | Line 646: | ||
| ====Overview==== | ====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. | + | [[https://platform.openai.com/docs/api-reference/introduction|ChatGPT API]] provides developers with access to OpenAI's powerful language models, such as GPT-4, GPT-4.1, GPT-5, GPT-5.1, enabling the integration of natural language understanding and generation into applications. |
| Line 502: | Line 660: | ||
| * **Customization**: Developers can guide the model's behavior using system prompts and parameters. | * **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===== | =====Tasks===== | ||
| - | - Download the generated project se-lab8-tasks.zip (and run **//npm install//** and **//npm run dev//**) | + | - Download the generated project **se-lab8-tasks.zip** (run `npm install` and then `npm run dev`). |
| - | - Use **V0** to design the frontend of your chat application. | + | - Read the section **“Using Generative AI Effectively: How to Ask Good Questions”** from this lab. Then, interact with at least one generative AI tool (ChatGPT, Gemini, Claude, etc.) and: |
| - | - Implement the chat logic with help from **Cursor** / **V0** / **Chat GPT** or other tools. | + | * use it to refine the requirements and UX for your chat application, and |
| - | - Integrate the [[https://platform.openai.com/docs/api-reference/introduction|ChatGPT API]] to generate responses. | + | * use it to generate or improve a part of your work (e.g., code snippet, test, error message copy, or help text) |
| - | - Add a privacy policy/terms of service to your application using a **generative AI tool**. | + | - Use **V0** to design the frontend of your chat application: |
| - | - **Bonus**: Use AI generated images for your chatbot avatar. | + | * chat window |
| - | + | * message list | |
| - | <note tip> | + | * input field |
| - | Hint: | + | * send button |
| - | [[https://leonardo.ai/|Leonardo.AI]], [[https://openai.com/dall-e-2/|DALL-E]], [[https://stability.ai/stable-diffusion|Stable Diffusion]] | + | - Implement the chat logic of your application using **Cursor / V0 / ChatGPT / other tools**: |
| - | </note> | + | * you may use a simple local/mock backend or hardcoded responses, |
| + | * you are encouraged to use AI tools while coding, | ||
| + | * **you do NOT have to integrate any external API (e.g., ChatGPT API) in your project.** | ||
| + | - Add a **Privacy Policy / Terms of Service** section to your application using a generative AI tool. | ||
| + | * Clearly prompt the AI with the context of your app (what it does, what data it handles). | ||
| + | * Adapt the generated text to your project if needed. | ||
| + | - **Bonus (optional):** Use AI-generated images (Leonardo.AI, DALL·E, Stable Diffusion, etc.) for your chatbot avatar or UI elements. | ||
