Programming Courses | Courses | archita phukan | Love Babbar | Coding Ninja | Durgasoft | ChatGPT prompt AI Prompt

⌨️ 4 ways to make an API Call in JS

💻 Back-End Development Basics ⚙️ Back-end development is the part of web development that works behind the scenes. It handles data, business logic, and communication between the front-end (what users see) and the database. What is Back-End Development? - It powers websites and apps by processing user requests, storing and retrieving data, and performing operations on the server. - Unlike front-end (design & interactivity), back-end focuses on the logic, database, and servers. Core Components of Back-End 1. Server    A server is a computer that listens to requests (like loading a page or submitting a form) and sends back responses. 2. Database    Stores all the data your app needs — user info, posts, products, etc.     Types of databases:     - _SQL (Relational):_ MySQL, PostgreSQL     - _NoSQL (Non-relational):_ MongoDB, Firebase 3. APIs (Application Programming Interfaces)     Endpoints that let the front-end and back-end communicate. For example, getting a list of users or saving a new post. 4. Back-End Language & Framework     Common languages: JavaScript (Node.js), Python, PHP, Ruby, Java Frameworks make coding easier: Express (Node.js), Django (Python), Laravel (PHP), Rails (Ruby) How Does Back-End Work? User → Front-End → Sends Request → Server (Back-End) → Processes Request → Queries Database → Sends Data Back → Front-End → User Simple Example: Create a Back-End Server Using Node.js & Express Let’s build a tiny app that sends a list of users when you visit a specific URL. Step 1: Setup your environment - Install Node.js from nodejs.org  - Create a project folder and open terminal there  - Initialize project & install Express framework: 

npm init -y
npm install express

Step 2: Create a file server.js

const express = require('express');
const app = express();
const port = 3000;

// Sample data - list of users
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

// Create a route to handle GET requests at /users
app.get('/users', (req, res) => {
  res.json(users);  // Send users data as JSON response
});

// Start the server
app.listen(port, () => {
  console.log(Server running on http://localhost:${port});
});

Step 3: Run the server In terminal, run: node server.js Step 4: Test the server Open your browser and go to:  http://localhost:3000/users You should see:

[
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" }
]

What Did You Build? - A simple server that _listens_ on port 3000  - An _API endpoint_ /users that returns a list of users in JSON format  - A basic back-end application that can be connected to a front-end Why Is This Important? - This is the foundation for building web apps that require user data, logins, content management, and more.  - Understanding servers, APIs, and databases helps you build full-stack applications. What’s Next? - Add routes for other operations like adding (POST), updating (PUT), and deleting (DELETE) data.  - Connect your server to a real database like MongoDB or MySQL.  - Handle errors, validations, and security (authentication, authorization).  - Learn to deploy your back-end app to the cloud (Heroku, AWS). 🎯 Pro Tip: Start simple and gradually add features. Try building a small app like a To-Do list with a back-end database. @CodingCoursePro Shared with Love➕

🔰 Container queries in CSS If you have not tried out container queries yet, would highly recommend that you do 🤩 This is a relatively new CSS feature, which is similar to media queries. While media queries are based on the dimension of the entire page, container queries are specific to individual elements in a page. 👉 Here we define a "container" and conditionally style elements inside the container based on the dimensions of the container 👉 Some other examples include, when you want to style an individual card based on its size

⌨️ Input Types In HTML

✅ CRUD Operations in Back-End Development 🛠📦 Now that you’ve built a basic server, let’s take it a step further by adding full CRUD functionality — the foundation of most web apps. 🔁 What is CRUD? CRUD stands for: ⦁ C reate → Add new data (e.g., new user) ⦁ R ead → Get existing data (e.g., list users) ⦁ U pdate → Modify existing data (e.g., change user name) ⦁ D elete → Remove data (e.g., delete user) These are the 4 basic operations every back-end should support. 🧪 Let’s Build a CRUD API We’ll use the same setup as before (Node.js + Express) and simulate a database with an in-memory array. Step 1: Setup Project (if not already)

npm init -y
npm install express

Step 2: Create server.js

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json()); // Middleware to parse JSON

let users = [
  { id: 1, name: 'Alice'},
  { id: 2, name: 'Bob'}
];

// READ - Get all users
app.get('/users', (req, res) => {
  res.json(users);
});

// CREATE - Add a new user
app.post('/users', (req, res) => {
  const newUser = {
    id: users.length + 1,
    name: req.body.name
  };
  users.push(newUser);
  res.status(201).json(newUser);
});

// UPDATE - Modify a user
app.put('/users/:id', (req, res) => {
  const userId = parseInt(req.params.id);
  const user = users.find(u => u.id === userId);
  if (!user) return res.status(404).send('User not found');
  user.name = req.body.name;
  res.json(user);
});

// DELETE - Remove a user
app.delete('/users/:id', (req, res) => {
  const userId = parseInt(req.params.id);
  users = users.filter(u => u.id!== userId);
  res.sendStatus(204);
});

app.listen(port, () => {
  console.log(`CRUD API running at http://localhost:${port}`);
});

Step 3: Test Your API Use tools like Postman or cURL to test: ⦁ GET /users → List users ⦁ POST /users → Add user { "name": "Charlie"} ⦁ PUT /users/1 → Update user 1’s name ⦁ DELETE /users/2 → Delete user 2 🎯 Why This Matters ⦁ CRUD is the backbone of dynamic apps like blogs, e-commerce, social media, and more ⦁ Once you master CRUD, you can connect your app to a real database and build full-stack apps Next Steps ⦁ Add validation (e.g., check if name is empty) ⦁ Connect to MongoDB or PostgreSQL ⦁ Add authentication (JWT, sessions) ⦁ Deploy your app to the cloud 💡 Pro Tip: Try building a Notes app or a Product Inventory system using CRUD! @CodingCoursePro Shared with Love➕

✅ Version Control with Git & GitHub 🗂 Version control is a must-have skill in web development! It lets you track changes in your code, collaborate with others, and avoid "it worked on my machine" problems 😅 📌 What is Git? Git is a distributed version control system that lets you save snapshots of your code. 📌 What is GitHub? GitHub is a cloud-based platform to store Git repositories and collaborate with developers. 🛠 Basic Git Commands (with Examples) 1️⃣ git init Initialize a Git repo in your project folder.

git init

2️⃣ git status Check what changes are untracked or modified.

git status

3️⃣ git add Add files to staging area (preparing them for commit).

git add index.html
git add.     # Adds all files

4️⃣ git commit Save the snapshot with a message.

git commit -m "Added homepage structure"

5️⃣ git log See the history of commits.

git log

🌐 Using GitHub 6️⃣ git remote add origin Connect your local repo to GitHub.

git remote add origin https://github.com/yourusername/repo.git

7️⃣ git push Push your local commits to GitHub.

git push -u origin main

8️⃣ git pull Pull latest changes from GitHub.

git pull origin main

👥 Collaboration Basics 🔀 Branching & Merging

git branch feature-navbar
git checkout feature-navbar
# Make changes, then:
git add.
git commit -m "Added navbar"
git checkout main
git merge feature-navbar

🔁 Pull Requests Used on GitHub to review & merge code between branches. 🎯 Project Tip: Use Git from day 1—even solo projects! It builds habits and prevents code loss. @CodingCoursePro Shared with Love➕ 💬 React ❤️ for more!

✅ Beginner's Guide to Start with Web Development 💻🚀 1. Understand What Web Development Is  Building websites and apps using code for structure, style, and functionality.  Popular areas: Front-end (HTML/CSS/JS), back-end (Node.js/Python), full-stack. 2. Use a Trusted Toolset  Start with free editors like: ⦁  Visual Studio Code ⦁  Git for version control ⦁  Browser dev tools (Chrome/Firefox) ⦁  Node.js (for back-end basics) 3. Set Up Your Basics  Install VS Code, create a GitHub account, and learn how the web works (browsers, servers, HTTP). 4. Start Small  Build a simple HTML page first. Don't dive into frameworks until you grasp basics—web dev builds progressively. 5. Choose Core Languages First  Focus on HTML for structure, CSS for styling, JavaScript for interactivity. Avoid advanced tools like React early on. 6. Store & Organize Safely  For projects: ⦁  Use GitHub (short term repos) ⦁  Version control with Git (track changes securely) 7. Learn to Debug & Test  Understand terms like: ⦁  DOM (Document Object Model) ⦁  Responsive Design ⦁  Console Errors ⦁  Breakpoints 8. Be Aware of Best Practices ⦁  Never skip accessibility (alt tags, semantic HTML) ⦁  Avoid outdated code (use modern ES6+ JS) ⦁  Stick to responsive design for all devices 9. Understand Deployment & Hosting ⦁  Track progress with commits ⦁  Deploy free via GitHub Pages or Netlify 10. Keep Learning  Follow updates via MDN Web Docs, freeCodeCamp, or YouTube channels like Traversy Media. Study real projects before building complex ones. @CodingCoursePro Shared with Love➕

✅ 50 Must-Know Web Development Concepts for Interviews 🌐💼 📍 HTML Basics 1. What is HTML? 2. Semantic tags (article, section, nav) 3. Forms and input types 4. HTML5 features 5. SEO-friendly structure 📍 CSS Fundamentals 6. CSS selectors & specificity 7. Box model 8. Flexbox 9. Grid layout 10. Media queries for responsive design 📍 JavaScript Essentials 11. let vs const vs var 12. Data types & type coercion 13. DOM Manipulation 14. Event handling 15. Arrow functions 📍 Advanced JavaScript 16. Closures 17. Hoisting 18. Callbacks vs Promises 19. async/await 20. ES6+ features 📍 Frontend Frameworks 21. React: props, state, hooks 22. Vue: directives, computed properties 23. Angular: components, services 24. Component lifecycle 25. Conditional rendering 📍 Backend Basics 26. Node.js fundamentals 27. Express.js routing 28. Middleware functions 29. REST API creation 30. Error handling 📍 Databases 31. SQL vs NoSQL 32. MongoDB basics 33. CRUD operations 34. Indexes & performance 35. Data relationships 📍 Authentication & Security 36. Cookies vs LocalStorage 37. JWT (JSON Web Token) 38. HTTPS & SSL 39. CORS 40. XSS & CSRF protection 📍 APIs & Web Services 41. REST vs GraphQL 42. Fetch API 43. Axios basics 44. Status codes 45. JSON handling 📍 DevOps & Tools 46. Git basics & GitHub 47. CI/CD pipelines 48. Docker (basics) 49. Deployment (Netlify, Vercel, Heroku) 50. Environment variables (.env) @CodingCoursePro Shared with Love➕

How to Build AI Agents from scratch even if you’ve never done it before. I spent months trying to build AI agents before I realized I was overcomplicating everything.🌟 Here's the 9 step roadmap I wish I had when I started:🥰 1. Define what your agent actually does - Don't jump into coding. Start with clarity. - What problem does it solve? Who uses it? What does success look like? 2. Write a solid system prompt - Your prompt is your agent's operating system. - Be specific about role, tone, and behavior. Test it. Refine it. 3. Give it tools to work with - Agents get powerful when they can do things. - Connect them to search, databases, code interpreters, document retrieval. 4. Coordinate multiple agents if needed. - Sometimes one agent isn't enough. - Build specialized agents (researcher, writer, reviewer) and orchestrate them. 5. Add memory - Does your agent need context from earlier conversations? - Add conversational memory or use vector databases to store and retrieve relevant information. 6. Add voice or vision if it matters - Not every agent needs this, but when it does, it changes everything. - Text-to-speech, image understanding - these capabilities make agents feel real. 7. Format outputs properly - Your agent's output needs to work for both - humans and systems. - Markdown for readability. JSON for machines. PDFs for sharing. 8. Build an interface - This is what turns your agent from a script into a product. - Could be a simple API, a web app, or a chat interface. 9. Test and improve continuously - Run test cases. Log everything. Watch where it breaks. - Build feedback loops so it gets better over time. I learned this the hard way: the best agents aren't the most complex ones. They're the ones that solve a real problem reliably. Start simple. Add complexity only when you need it. @CodingCoursePro Shared with Love➕

✅ CSS Basics You Should Know 🎨💻 CSS (Cascading Style Sheets) is used to style HTML elements — adding colors, spacing, layout, and more. 1️⃣ CSS Syntax

selector {
  property: value;
}

Example:

h1 {
  color: blue;
  font-size: 32px;
}

2️⃣ How to Add CSS ⦁ Inline:

<p style="color: red;">Hello</p>

⦁ Internal (within HTML):

<style>
  p { color: green; }
</style>

⦁ External (best practice):

<link rel="stylesheet" href="style.css">

3️⃣ Selectors ⦁ * → All elements ⦁ p → All <p> tags ⦁ .class → Elements with class ⦁ #id → Element with specific ID

#title { color: blue; }.red-text { color: red; }

4️⃣ Colors & Fonts

body {
  background-color: #f2f2f2;
  color: #333;
  font-family: Arial, sans-serif;
}

5️⃣ Box Model  Every HTML element is a box:  content + padding + border + margin 6️⃣ Layout with Flexbox

{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

7️⃣ Responsive Design

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

8️⃣ Hover Effects

button:hover {
  background-color: black;
  color: white;
}

9️⃣ Common Properties ⦁ color – Text color ⦁ background-color – Background ⦁ margin & padding – Spacing ⦁ border – Border style ⦁ width / height – Size ⦁ text-align – Alignment 💡 Tip: Organize your styles using class names and external CSS files for better scalability. @CodingCoursePro Shared with Love➕ 💬 Tap ❤️ for more!

✅ 15-Day Winter Training by GeeksforGeeks ❄️💻 🎯 Build 1 Industry-Level Project 🏅 IBM Certification Included 👨‍🏫 Mentor-Led Classroom Learning 📍 Offline in: Noida | Bengaluru | Hyderabad | Pune | Kolkata 🧳 Perfect for Minor/Major Projects Portfolio 🔧 MERN Stack: https://gfgcdn.com/tu/WC6/ 📊 Data Science: https://gfgcdn.com/tu/WC7/ 🔥 What You’ll Build: • MERN: Full LMS with auth, roles, payments, AWS deploy • Data Science: End-to-end GenAI apps (chatbots, RAG, recsys) 📢 Limited Seats – Register Now!

⌨️ Cookie Masterclass Cookies are small pieces of data stored in a user's browser, commonly used for session management, personalizing, and tracking. In JavaScript, the document.cookie property allows you to create, read, update, and delete cookies. Here is a concise guide on managing cookies using JavaScript.

OnSpace Mobile App builder: Build AI Apps in minutes 👉https://www.onspace.ai/agentic-app-builder?via=tg_abt With OnSpace, you can build AI Mobile Apps by chatting with AI, and publish to PlayStore or AppStore. What will you get: - Create app by chatting with AI; - Integrate with Any top AI power just by giving order (like Sora2, Nanobanan Pro & Gemini 3 Pro); - Download APK,AAB file, publish to AppStore. - Add payments and monetize like in-app-purchase and Stripe. - Functional login & signup. - Database + dashboard in minutes. - Full tutorial on YouTube and within 1 day customer service @CodingCoursePro Shared with Love➕

✅ HTML Basics You Must Know 🧱🌐 HTML (HyperText Markup Language) is the foundation of every web page. It structures content like text, images, links, and forms. 1️⃣ Basic HTML Structure

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Explanation: ⦁ <!DOCTYPE html> → Declares HTML5 ⦁ <html> → Root element ⦁ <head> → Info about the page (title, meta) ⦁ <body> → Visible content 2️⃣ Headings and Paragraphs

<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This is a paragraph.</p>

3️⃣ Links and Images

<a href="https://google.com">Visit Google</a>  
<img src="image.jpg" alt="Image" width="200">

4️⃣ Lists

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

<ol>
  <li>Step 1</li>
  <li>Step 2</li>
</ol>

5️⃣ Tables

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
  </tr>
</table>

6️⃣ Forms

<form>
  <input type="text" placeholder="Your name">
  <input type="email" placeholder="Your email">
  <button type="submit">Submit</button>
</form>

7️⃣ Div & Span ⦁ <div> → Block-level container ⦁ <span> → Inline container

<div style="background: lightgray;">Box</div>
<span style="color: red;">Text</span>

💡 Practice HTML in a live editor like CodePen or JSFiddle to see instant results! @CodingCoursePro Shared with Love➕ 💬 Tap ❤️ for more!

✅ Web Development Basics You Should Know 🌐💡 Understanding the foundations of web development is the first step toward building websites and web apps. 1️⃣ What is Web Development?  Web development is the process of creating websites and web applications. It includes everything from a basic HTML page to full-stack apps.  Types of Web Dev: - Frontend: What users see (HTML, CSS, JavaScript)  - Backend: Server-side logic, databases (Node.js, Python, etc.)  - Full Stack: Both frontend + backend  2️⃣ How the Web Works When you visit a website:  - The browser (client) sends a request via HTTP  - The server processes it and sends back a response (HTML, data)  - Your browser renders it on the screen  Example: Typing www.example.com sends a request → DNS resolves IP → Server sends back the HTML → Browser displays it  3️⃣ HTML (HyperText Markup Language)  Defines the structure of web pages. 

<h1>Welcome</h1>
<p>This is my first website.</p>

*4️⃣ CSS (Cascading Style Sheets)*  Adds *style* to HTML: colors, layout, fonts. 

h1 {
  color: blue;
  text-align: center;
}

*5️⃣ JavaScript (JS)*  Makes the website *interactive* (buttons, forms, animations). 

<button onclick="alert('Hello!')">Click Me</button>

*6️⃣ Responsive Design*  Using *media queries* to make websites mobile-friendly. 

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

*7️⃣ DOM (Document Object Model)*  JS can interact with page content using the DOM. 

document.getElementById("demo").innerText = "Changed!";

*8️⃣ Git & GitHub*  Version control to track changes and collaborate. 

git init  
git add .  
git commit -m "First commit"  
git push  

*9️⃣ API (Application Programming Interface)*  APIs let you pull or send data between your app and a server. 

fetch('https://api.weatherapi.com')
  .then(res => res.json())
  .then(data => console.log(data));

🔟 Hosting Your Website  You can deploy websites using platforms like Vercel, Netlify, or GitHub Pages. 💡 Once you know these basics, you can move on to frameworks like React, backend tools like Node.js, and databases like MongoDB. @CodingCoursePro Shared with Love➕ 💬 Tap ❤️ for more!

Top 5 Small AI Coding Models That You Can Run Locally 1️⃣ gpt-oss-20b A fast, open-weight OpenAI reasoning and coding model you can run locally for IDE assistants and low-latency tools. 2️⃣ Qwen3-VL-32B-Instruct A powerful open-source coding model that understands screenshots, UI flows, diagrams, and code together. 3️⃣ Apriel-1.5-15B-Thinker A reasoning-first coding model that thinks step-by-step before writing reliable production-ready code. 4️⃣ Seed-OSS-36B-Instruct A high-performance open coding model built for multi-file repositories, refactoring, and agent workflows. 5️⃣ Qwen3-30B-A3B-Instruct An efficient MoE coding model delivering large-model reasoning power with small-model compute for local use. Double Tap ❤️ For More

🍒 Generate Unlimited Ghibli Images for Free 🤫.

from diffusers import StableDiffusionImg2ImgPipeline
import torch
from PIL import Image
import io
from google.colab import files
import matplotlib.pyplot as plt
import time

# Load model function
def load_model():
    model_id = "nitrosocke/Ghibli-Diffusion"  # Correct model ID
    dtype = torch.float16 if torch.cuda.is_available() else torch.float32
    print("Loading model...")
    pipe = StableDiffusionImg2ImgPipeline.from_pretrained(model_id, torch_dtype=dtype)
    pipe.to("cuda" if torch.cuda.is_available() else "cpu")
    pipe.enable_attention_slicing()  # Optimize memory usage
    print("Model loaded!")
    return pipe

# Function to generate Ghibli-style image
def generate_ghibli_image(image, pipe, strength):
    image = image.convert("RGB")
    image = image.resize((512, 512))  # Ensure proper size
    
    prompt = "Ghibli-style anime painting, soft pastel colors, highly detailed, masterpiece"
    
    print("Generating image...")
    start_time = time.time()
    result = pipe(prompt=prompt, image=image, strength=strength).images[0]
    print(f"Image generated in {time.time() - start_time:.2f} seconds!")
    return result

# Check for GPU
gpu_info = "GPU is available!" if torch.cuda.is_available() else "Warning: GPU not available. Processing will be slow."
print(gpu_info)

# Load the model
pipe = load_model()

# Upload image section
print("Please upload your image file:")
uploaded = files.upload()

if uploaded:
    file_name = list(uploaded.keys())[0]
    image = Image.open(io.BytesIO(uploaded[file_name]))
    
    # Display original image
    plt.figure(figsize=(5, 5))
    plt.imshow(image)
    plt.title("Original Image")
    plt.axis('off')
    plt.show()
    
    # Ask for strength input with error handling
    while True:
        try:
            strength = float(input("Enter stylization strength (0.3-0.8, recommended 0.6): "))
            strength = max(0.3, min(0.8, strength))  # Clamp between 0.3 and 0.8
            break
        except ValueError:
            print("Invalid input. Please enter a number between 0.3 and 0.8.")
    
    # Generate and display the result
    result_img = generate_ghibli_image(image, pipe, strength)
    
    plt.figure(figsize=(5, 5))
    plt.imshow(result_img)
    plt.title("Ghibli Portrait")
    plt.axis('off')
    plt.show()
    
    # Save the output image and offer download
    output_filename = f"ghibli_portrait_{file_name}"
    result_img.save(output_filename)
    files.download(output_filename)
    print(f"Image saved as {output_filename} and download initiated!")
else:
    print("No file was uploaded. Please run the cell again and upload an image.")

🚀 How to Generate Ghibli Images Using your Python Code? 🍵 Even You can make your own API 🌟 Just open below link in Chrome https://colab.research.google.com/ (They provide platform to run python code.) ❤️ Click + New Notebook (Once click open window like below). 🥷 Put Above code in “Start coding or generate with ai” & put below code. 🌭 Once you add code and click on run icon. It’s take 2 second for run 🧿 Wait untill upload your inage box appears. 💮 After Appears Choose file. 😱 Wait 1 to 2 minute. Your image ready & download automatic. 🍒 Generate Unlimited Ghibli Images for Free 🤫. @CodingCoursePro Shared with Love➕

from diffusers import StableDiffusionImg2ImgPipeline
import torch
from PIL import Image
import io
from google.colab import files
import matplotlib.pyplot as plt
import time

# Load model function
def load_model():
    model_id = "nitrosocke/Ghibli-Diffusion"  # Correct model ID
    dtype = torch.float16 if torch.cuda.is_available() else torch.float32
    print("Loading model...")
    pipe = StableDiffusionImg2ImgPipeline.from_pretrained(model_id, torch_dtype=dtype)
    pipe.to("cuda" if torch.cuda.is_available() else "cpu")
    pipe.enable_attention_slicing()  # Optimize memory usage
    print("Model loaded!")
    return pipe

# Function to generate Ghibli-style image
def generate_ghibli_image(image, pipe, strength):
    image = image.convert("RGB")
    image = image.resize((512, 512))  # Ensure proper size
    
    prompt = "Ghibli-style anime painting, soft pastel colors, highly detailed, masterpiece"
    
    print("Generating image...")
    start_time = time.time()
    result = pipe(prompt=prompt, image=image, strength=strength).images[0]
    print(f"Image generated in {time.time() - start_time:.2f} seconds!")
    return result

# Check for GPU
gpu_info = "GPU is available!" if torch.cuda.is_available() else "Warning: GPU not available. Processing will be slow."
print(gpu_info)

# Load the model
pipe = load_model()

# Upload image section
print("Please upload your image file:")
uploaded = files.upload()

if uploaded:
    file_name = list(uploaded.keys())[0]
    image = Image.open(io.BytesIO(uploaded[file_name]))
    
    # Display original image
    plt.figure(figsize=(5, 5))
    plt.imshow(image)
    plt.title("Original Image")
    plt.axis('off')
    plt.show()
    
    # Ask for strength input with error handling
    while True:
        try:
            strength = float(input("Enter stylization strength (0.3-0.8, recommended 0.6): "))
            strength = max(0.3, min(0.8, strength))  # Clamp between 0.3 and 0.8
            break
        except ValueError:
            print("Invalid input. Please enter a number between 0.3 and 0.8.")
    
    # Generate and display the result
    result_img = generate_ghibli_image(image, pipe, strength)
    
    plt.figure(figsize=(5, 5))
    plt.imshow(result_img)
    plt.title("Ghibli Portrait")
    plt.axis('off')
    plt.show()
    
    # Save the output image and offer download
    output_filename = f"ghibli_portrait_{file_name}"
    result_img.save(output_filename)
    files.download(output_filename)
    print(f"Image saved as {output_filename} and download initiated!")
else:
    print("No file was uploaded. Please run the cell again and upload an image.")

🚀 How to Generate Ghibli Images Using your Python Code? 🍵 Even You can make your own API 🌟 Just open below link in Chrome https://colab.research.google.com/ (They provide platform to run python code.) ❤️ Click + New Notebook (Once click open window like below). 🥷 Put Above code in “Start coding or generate with ai” & put below code. 🌭 Once you add code and click on run icon. It’s take 2 second for run 🧿 Wait untill upload your inage box appears. 💮 After Appears Choose file. 😱 Wait 1 to 2 minute. Your image ready & download automatic.

🔰 Improve your coding logic @CodingCoursePro Shared with Love➕

✅ Web Development Skills Every Beginner Should Master 🌐⚡️ 1️⃣ Core Foundations • HTML tags you use daily • CSS layouts with Flexbox and Grid • JavaScript basics like loops, events, and DOM updates • Responsive design for mobile-first pages 2️⃣ Frontend Essentials • React for building components • Next.js for routing and server rendering • Tailwind CSS for fast styling • State management with Context or Redux Toolkit 3️⃣ Backend Building Blocks • APIs with Express.js • Authentication with JWT • Database queries with SQL • Basic caching to speed up apps 4️⃣ Database Skills • MySQL or PostgreSQL for structured data • MongoDB for document data • Redis for fast key-value storage 5️⃣ Developer Workflow • Git for version control • GitHub Actions for automation • Branching workflows for clean code reviews 6️⃣ Testing and Debugging • Chrome DevTools for tracking issues • Postman for API checks • Jest for JavaScript testing • Logs for spotting backend errors 7️⃣ Deployment • Vercel for frontend projects • Render or Railway for full stack apps • Docker for consistent environments 8️⃣ Design and UX Basics • Figma for mockups • UI patterns for navigation and layout • Accessibility checks for real users 💡 Start with one simple project. Ship it. Improve it. @CodingCoursePro Shared with Love➕ 💬 Double Tap ❤️” for more