Skip to main content

Creating A Website

 Absolutely! Here's a complete step-by-step guide from start to finish to build your AI Cartoon Avatar Generator Website with:

✅ Login/Register System (PHP + MySQL)
✅ Real Face-to-Cartoon AI (DeepAI / Flask)
✅ Multiple Style Options (Cartoon, Anime, Sketch)
✅ Enforced Login Before Generating
✅ Full Visual Studio Code (VS Code) setup

🎯 FINAL GOAL:

A fully working digital cartoon avatar generator that:

  • Converts uploaded face images to cartoon styles

  • Requires login to access generator

  • Uses real backend + AI

  • Looks clean on mobile & desktop

🗂️ PROJECT STRUCTURE:

pgsql
cartoon-avatar-website/
├── backend/                ← Flask backend for AI cartoon generator
│   └── app.py
│
├── public_html/            ← Frontend + login system (PHP + JS)
│   ├── index.html          ← Homepage with Hero section
│   ├── login.php           ← User login
│   ├── register.php        ← User registration
│   ├── dashboard.php       ← Logged-in dashboard with generator
│   ├── db.php              ← DB connection
│   └── upload.js           ← JS to send image to backend
│
└── style.css               ← Optional custom CSS

✅ STEP 1: Setup Your Tools

📦 What You Need:

🔐 STEP 2: Setup MySQL Database

🔧 A. Create Free DB on:

👉 https://www.freesqldatabase.com/

Save the following:

  • Host

  • Username

  • Password

  • DB Name

🧱 B. Create a table named users

Run this SQL:

sql
CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  email VARCHAR(100) NOT NULL,
  password VARCHAR(255) NOT NULL
);

🧩 STEP 3: Build PHP Login/Register System

🔌 db.php (connects to your DB)

php
<?php
$conn = new mysqli("HOST", "USERNAME", "PASSWORD", "DBNAME");
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}
?>

📝 register.php – Register new users

php
<?php
include 'db.php';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $email = $_POST['email'];
  $pass = password_hash($_POST['password'], PASSWORD_DEFAULT);
  $stmt = $conn->prepare("INSERT INTO users (email, password) VALUES (?, ?)");
  $stmt->bind_param("ss", $email, $pass);
  $stmt->execute();
  echo "Registered. <a href='login.php'>Login</a>";
}
?>
<form method="POST">
  <input name="email" required><br>
  <input name="password" type="password" required><br>
  <button type="submit">Register</button>
</form>

🔐 login.php – Login form

php
<?php
session_start();
include 'db.php';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $email = $_POST['email'];
  $stmt = $conn->prepare("SELECT id, password FROM users WHERE email=?");
  $stmt->bind_param("s", $email);
  $stmt->execute();
  $stmt->store_result();
  $stmt->bind_result($id, $hash);
  $stmt->fetch();

  if ($stmt->num_rows > 0 && password_verify($_POST['password'], $hash)) {
    $_SESSION['user_id'] = $id;
    header("Location: dashboard.php");
  } else {
    echo "Invalid login";
  }
}
?>
<form method="POST">
  <input name="email" required><br>
  <input name="password" type="password" required><br>
  <button type="submit">Login</button>
</form>

🏠 STEP 4: Homepage with Hero Section

🌐 index.html – Main homepage

html
<!DOCTYPE html>
<html>
<head>
  <title>Cartoon Avatar Generator</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section class="hero">
    <h1>Create Your Digital Cartoon Avatar</h1>
    <p>Upload your face, select style & get cartoonified!</p>
    <a href="login.php">Start Now</a>
  </section>
</body>
</html>

🚪 STEP 5: Dashboard (after login)

dashboard.php – Upload Image UI

php
<?php
session_start();
if (!isset($_SESSION['user_id'])) {
  header("Location: login.php");
  exit();
}
?>
<h2>Upload Your Photo & Select Style</h2>
<select id="style">
  <option value="cartoon">Classic Cartoon</option>
  <option value="anime">Anime Style</option>
  <option value="sketch">Sketch</option>
</select><br>
<input type="file" id="imageInput"><br>
<button onclick="uploadImage()">Generate</button>
<div id="result"></div>
<script src="upload.js"></script>

🤖 STEP 6: AI Backend (Python + Flask)

📦 Install Dependencies

bash
pip install flask flask-cors requests

🧠 app.py – AI Cartoon Generator Backend

python
from flask import Flask, request, jsonify
from flask_cors import CORS
import requests

app = Flask(__name__)
CORS(app)

API_KEY = "YOUR_DEEPAI_API_KEY"

@app.route('/upload', methods=['POST'])
def upload_image():
    image = request.files['image']
    style = request.form.get('style', 'cartoon')

    files = {'image': image.read()}
    headers = {'api-key': API_KEY}

    api_urls = {
        "cartoon": "https://api.deepai.org/api/toonify",
        "anime": "https://api.deepai.org/api/anime-style",
        "sketch": "https://api.deepai.org/api/torch-srgan"
    }

    response = requests.post(api_urls.get(style, api_urls["cartoon"]), files=files, headers=headers)
    result = response.json()

    return jsonify({ "cartoon_url": result.get("output_url", "") })

if __name__ == '__main__':
    app.run(debug=True)

🔁 STEP 7: Frontend JS to Send Image

🔄 upload.js

javascript
async function uploadImage() {
  const input = document.getElementById('imageInput');
  const file = input.files[0];
  const style = document.getElementById('style').value;
  if (!file) return alert("Please upload an image!");

  const formData = new FormData();
  formData.append('image', file);
  formData.append('style', style);

  const res = await fetch('http://localhost:5000/upload', {
    method: 'POST',
    body: formData
  });

  const data = await res.json();
  document.getElementById('result').innerHTML = `
    <img src="${data.cartoon_url}" style="max-width: 100%;">
  `;
}

▶️ STEP 8: Run Everything

🐍 Start Flask Backend:

bash
cd backend
python app.py

🖥️ Start PHP Server:

If using XAMPP:

  • Place files inside htdocs/cartoon-avatar-website

  • Visit http://localhost/cartoon-avatar-website/index.html

✨ OPTIONAL IMPROVEMENTS

  • Add logout button (logout.php)

  • Add more cartoon styles or overlays (police, hero, etc.)

  • Add TailwindCSS for styling

  • Host Flask backend on Render

  • Host frontend on FreeHostia

🎉 YOU DID IT!

You now have a fully functional:

✅ Secure Login/Register System
✅ Real Cartoon Generator using AI
✅ Style Picker (Cartoon, Anime, Sketch)
✅ Image Upload with Preview
✅ Mobile & Desktop Friendly UI

Would you like:

  • A full zip file download?

  • Help deploying it publicly?

  • Add advanced features like face + body merging?

Let me know! I'm ready to help you launch 🚀

Popular posts from this blog

📚 Equation Student Part-Time Jobs – Earn Money Online (With Real Proof, Images, & Step-by-Step Guide)

  📚 Equation Student Part-Time Jobs – Earn Money Online (With Real Proof, Images, & Step-by-Step Guide) In today's digital age, even students can earn money part-time from home using just a smartphone or laptop . Whether you're in school or college, there are many genuine part-time jobs that are 100% real, require no investment, and offer proof of payments. This article will help Equation Students get started with real job options, how to apply, where to work, and how much you can earn — all explained with images and official links . Certainly! Here are some illustrative images that depict various ways students and individuals can work and earn money online: You can use these images freely on your blog or website. Let me know if you need help with anything else!✅ Why Part-Time Jobs for Students? 🕒 Flexible hours (2–4 hours a day) 💰 Earn ₹5,000–₹25,000/month 📱 Work from phone/laptop 🧠 Use your academic or creative skills 📈 Build resume + experi...
Read more

5 Smart Digital Learning Tips for Students

  📚 5 Smart Digital Learning Tips for Students – April 13, 2025 👋 Hello, Learners! In today’s fast-moving world, studying online is more than a trend — it’s a necessity. Whether you're in school, college, or preparing for competitive exams, digital learning can make your journey smoother if done right . So today, we’re sharing 5 smart tips to help you get the most out of your digital learning experience. 🔹 1. Create a Study Routine Just like in offline classes, consistency is key . Set a daily time for online classes, notes revision, and practice. Use a calendar app or sticky notes on your wall to stay on track. 🔹 2. Use the Right Platforms There are so many free resources available! Here are some top choices: 📘 Khan Academy – Great for school-level learning 📗 NPTEL – Ideal for engineering and tech students 📕 Coursera – University-level courses and certificates 🔹 3. Avoid Distractions Keep your phone on Do Not Disturb while studying. Use browser extensio...
Read more