✅ 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:

✅ Visual Studio Code (download from https://code.visualstudio.com/)
✅ XAMPP (for running PHP + MySQL locally)
✅ Python (from python.org) installed with pip
✅ Signup at https://deepai.org (for the AI API)

🔐 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 🚀

Search This Blog

Free Focus

Creating A Website

🎯 FINAL GOAL:

🗂️ PROJECT STRUCTURE:

✅ STEP 1: Setup Your Tools

📦 What You Need:

🔐 STEP 2: Setup MySQL Database

🔧 A. Create Free DB on:

🧱 B. Create a table named `users`

🧩 STEP 3: Build PHP Login/Register System

🔌 `db.php` (connects to your DB)

📝 `register.php` – Register new users

🔐 `login.php` – Login form

🏠 STEP 4: Homepage with Hero Section

🌐 `index.html` – Main homepage

🚪 STEP 5: Dashboard (after login)

`dashboard.php` – Upload Image UI

🤖 STEP 6: AI Backend (Python + Flask)

📦 Install Dependencies

🧠 `app.py` – AI Cartoon Generator Backend

🔁 STEP 7: Frontend JS to Send Image

🔄 `upload.js`

▶️ STEP 8: Run Everything

🐍 Start Flask Backend:

🖥️ Start PHP Server:

✨ OPTIONAL IMPROVEMENTS

🎉 YOU DID IT!

Popular posts from this blog

Best Free Money-Making and Earning Apps in 2025

Digital Communication System Notes

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

Creating A Website

🎯 FINAL GOAL:

🗂️ PROJECT STRUCTURE:

✅ STEP 1: Setup Your Tools

📦 What You Need:

🔐 STEP 2: Setup MySQL Database

🔧 A. Create Free DB on:

🧱 B. Create a table named users

🧩 STEP 3: Build PHP Login/Register System

🔌 db.php (connects to your DB)

📝 register.php – Register new users

🔐 login.php – Login form

🏠 STEP 4: Homepage with Hero Section

🌐 index.html – Main homepage

🚪 STEP 5: Dashboard (after login)

dashboard.php – Upload Image UI

🤖 STEP 6: AI Backend (Python + Flask)

📦 Install Dependencies

🧠 app.py – AI Cartoon Generator Backend

🔁 STEP 7: Frontend JS to Send Image

🔄 upload.js

▶️ STEP 8: Run Everything

🐍 Start Flask Backend:

🖥️ Start PHP Server:

✨ OPTIONAL IMPROVEMENTS

🎉 YOU DID IT!

Popular posts from this blog

Best Free Money-Making and Earning Apps in 2025

Digital Communication System Notes

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

🧱 B. Create a table named `users`

🔌 `db.php` (connects to your DB)

📝 `register.php` – Register new users

🔐 `login.php` – Login form

🌐 `index.html` – Main homepage

`dashboard.php` – Upload Image UI

🧠 `app.py` – AI Cartoon Generator Backend

🔄 `upload.js`