dk2430098's picture
Upload folder using huggingface_hub
98b379f verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description"
content="ImageForensics-Detect: Research-grade AI vs Real image detection using multi-branch deep learning forensic analysis." />
<title>ImageForensics-Detect | AI vs Real Image Analyzer</title>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap"
rel="stylesheet">
<!-- Absolute paths for deployment via FastAPI -->
<link rel="stylesheet" href="/static/style.css" />
</head>
<body>
<!-- ── Header ─────────────────────────────────────────────── -->
<header class="header">
<div class="header-inner">
<div class="logo">
<svg class="logo-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2l9 4.5v9L12 20l-9-4.5v-9L12 2z" />
<path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
<path d="M12 7.5l0 1" />
<path d="M12 15.5l0 1" />
<path d="M7.5 12l1 0" />
<path d="M15.5 12l1 0" />
</svg>
<div class="logo-text-group">
<div class="logo-main"><span class="logo-title">ImageForensics</span><span class="logo-accent">Detect</span>
</div>
<div class="logo-sub">Multi-Branch Forensic Analysis System</div>
</div>
</div>
<nav class="header-badges">
<span class="badge badge-research">πŸŽ“ B.Tech Final Year</span>
<span class="badge badge-research">IEEE-Grade Research</span>
<span class="badge badge-live" id="serverStatus">● Connecting...</span>
</nav>
</div>
</header>
<!-- ── Stats Hero Bar ─────────────────────────────────────── -->
<div class="stats-bar">
<div class="stats-inner">
<div class="stat-item">
<div class="stat-value">99.30%</div>
<div class="stat-label">ViT Accuracy</div>
</div>
<div class="stat-divider"></div>
<div class="stat-item">
<div class="stat-value">120K</div>
<div class="stat-label">Training Images</div>
</div>
<div class="stat-divider"></div>
<div class="stat-item">
<div class="stat-value">5</div>
<div class="stat-label">Forensic Branches</div>
</div>
<div class="stat-divider"></div>
<div class="stat-item">
<div class="stat-value">2+2+1</div>
<div class="stat-label">DL + Classical + Fusion</div>
</div>
<div class="stat-divider"></div>
<div class="stat-item">
<div class="stat-value">86M</div>
<div class="stat-label">ViT Parameters</div>
</div>
</div>
</div>
<!-- ── Main ───────────────────────────────────────────────── -->
<main class="main">
<!-- Upload Section -->
<section class="upload-section">
<div class="section-label">STEP 1 β€” UPLOAD IMAGE FOR FORENSIC ANALYSIS</div>
<div class="upload-zone" id="uploadZone">
<input type="file" id="fileInput" accept="image/*" hidden />
<div class="upload-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
<polyline points="17 8 12 3 7 8" />
<line x1="12" y1="3" x2="12" y2="15" />
</svg>
</div>
<div class="upload-title">Drop an image here or click to upload</div>
<div class="upload-sub">Supports JPG Β· PNG Β· WebP Β· BMP Β· Max 15 MB</div>
<div class="upload-hint">System detects: <strong>Real Camera Photo</strong> vs <strong>AI-Generated
Image</strong></div>
<button class="btn-upload" id="selectBtn">Select Image</button>
<div class="upload-formats">
<span class="fmt-chip">JPEG</span>
<span class="fmt-chip">PNG</span>
<span class="fmt-chip">WebP</span>
<span class="fmt-chip">BMP</span>
</div>
</div>
<!-- Preview -->
<div class="preview-area" id="previewArea" style="display:none">
<img id="previewImg" class="preview-img" alt="Uploaded image preview" />
<div class="preview-info">
<div id="fileName" class="preview-filename"></div>
<div id="fileSize" class="preview-filesize"></div>
<div class="preview-ready">βœ… Ready for forensic analysis</div>
</div>
<div class="preview-actions">
<button class="btn-analyze" id="analyzeBtn">
<span class="btn-icon">⚑</span> Analyze Image
</button>
<button class="btn-clear" id="clearBtn">βœ• Clear</button>
</div>
</div>
</section>
<!-- ── Analyzing Spinner ──────────────────────────────────── -->
<div class="analyzing-state" id="analyzingState" style="display:none">
<div class="spinner-container">
<div class="spinner-ring"></div>
<div class="spinner-core">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<circle cx="11" cy="11" r="8" />
<line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg>
</div>
</div>
<div class="analyzing-title">Running 5-Branch Forensic Analysis...</div>
<div class="analyzing-steps" id="analyzingSteps">
<div class="step-item" id="step-spectral">β—‹ Spectral FFT/DCT Frequency Analysis</div>
<div class="step-item" id="step-edge">β—‹ Edge & Gradient Forensics</div>
<div class="step-item" id="step-cnn">β—‹ CNN Texture Analysis (EfficientNet-B0)</div>
<div class="step-item" id="step-vit">β—‹ ViT Global Semantic Analysis (99.30% acc)</div>
<div class="step-item" id="step-diffusion">β—‹ Diffusion Residual Noise Analysis</div>
<div class="step-item" id="step-fusion">β—‹ Certainty-Weighted Probabilistic Fusion</div>
</div>
</div>
<!-- ── Results Panel ──────────────────────────────────────── -->
<section class="results-section" id="resultsSection" style="display:none">
<div class="section-label">STEP 2 β€” FORENSIC ANALYSIS RESULTS</div>
<!-- Verdict Card -->
<div class="verdict-card" id="verdictCard">
<div class="verdict-icon" id="verdictIcon"></div>
<div class="verdict-content">
<div class="verdict-label">Final Prediction</div>
<div class="verdict-text" id="verdictText"></div>
<div class="verdict-sub" id="verdictSub"></div>
<!-- Probability Bar -->
<div class="prob-bar-section">
<div class="prob-bar-labels">
<span class="prob-label-real">πŸ“· Real</span>
<span class="prob-label-fake">πŸ€– AI-Generated</span>
</div>
<div class="prob-bar-track">
<div class="prob-bar-real" id="probBarReal"></div>
<div class="prob-bar-fake" id="probBarFake"></div>
</div>
<div class="prob-bar-values">
<span id="probRealPct"></span>
<span id="probFakePct"></span>
</div>
</div>
</div>
<div class="confidence-ring-wrap">
<svg class="confidence-ring" viewBox="0 0 120 120">
<circle cx="60" cy="60" r="50" class="ring-bg" />
<circle cx="60" cy="60" r="50" class="ring-fill" id="ringFill" />
</svg>
<div class="confidence-center">
<div class="conf-value" id="confValue"></div>
<div class="conf-label">Confidence</div>
</div>
</div>
</div>
<!-- Branch Scorecards -->
<div class="branches-grid" id="branchesGrid">
<div class="branches-header">
<div class="section-label" style="margin:0">BRANCH-LEVEL FORENSIC SCORES</div>
<div class="branches-legend">
<span><span class="legend-dot real"></span> Real</span>
<span><span class="legend-dot fake"></span> AI-Generated</span>
<span class="legend-note">Bar = Fake Probability Β· Weight = Fusion Contribution</span>
</div>
</div>
<!-- Spectral -->
<div class="branch-card" id="bc-spectral">
<div class="branch-icon spectral">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M2 10s3-3 3-3 2 1 2 1 3-3 3-3 2 1 2 1 3-3 3-3" />
<path d="M22 14s-3 3-3 3-2-1-2-1-3 3-3 3-2-1-2-1-3 3-3 3" />
</svg>
</div>
<div class="branch-info">
<div class="branch-name">Spectral Branch <span class="branch-tag">Signal</span></div>
<div class="branch-desc">FFT/DCT frequency-domain artifact detection</div>
<div class="branch-bar-wrap">
<div class="branch-bar" id="bar-spectral"></div>
</div>
</div>
<div class="branch-score-col">
<div class="branch-prob" id="prob-spectral"></div>
<div class="branch-conf" id="conf-spectral"></div>
<div class="branch-weight" id="weight-spectral"></div>
</div>
</div>
<!-- Edge -->
<div class="branch-card" id="bc-edge">
<div class="branch-icon edge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M12 3v18" />
<path d="M3 12h18" />
<path d="M18 9l-3 3 3 3" />
<path d="M6 9l3 3-3 3" />
</svg>
</div>
<div class="branch-info">
<div class="branch-name">Edge Branch <span class="branch-tag">Signal</span></div>
<div class="branch-desc">Sobel/Laplacian edge & gradient statistics</div>
<div class="branch-bar-wrap">
<div class="branch-bar" id="bar-edge"></div>
</div>
</div>
<div class="branch-score-col">
<div class="branch-prob" id="prob-edge"></div>
<div class="branch-conf" id="conf-edge"></div>
<div class="branch-weight" id="weight-edge"></div>
</div>
</div>
<!-- CNN -->
<div class="branch-card" id="bc-cnn">
<div class="branch-icon cnn">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
<path d="M12 8v4" />
<path d="M12 16h.01" />
</svg>
</div>
<div class="branch-info">
<div class="branch-name">CNN Branch <span class="branch-tag trained">Trained</span></div>
<div class="branch-desc">EfficientNet-B0 texture & patch analysis</div>
<div class="branch-bar-wrap">
<div class="branch-bar" id="bar-cnn"></div>
</div>
</div>
<div class="branch-score-col">
<div class="branch-prob" id="prob-cnn"></div>
<div class="branch-conf" id="conf-cnn"></div>
<div class="branch-weight" id="weight-cnn"></div>
</div>
</div>
<!-- ViT -->
<div class="branch-card" id="bc-vit">
<div class="branch-icon vit">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<circle cx="12" cy="12" r="3" />
<path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
</svg>
</div>
<div class="branch-info">
<div class="branch-name">ViT Branch <span class="branch-tag trained">99.30%</span></div>
<div class="branch-desc">Vision Transformer global semantic analysis</div>
<div class="branch-bar-wrap">
<div class="branch-bar" id="bar-vit"></div>
</div>
</div>
<div class="branch-score-col">
<div class="branch-prob" id="prob-vit"></div>
<div class="branch-conf" id="conf-vit"></div>
<div class="branch-weight" id="weight-vit"></div>
</div>
</div>
<!-- Diffusion -->
<div class="branch-card" id="bc-diffusion">
<div class="branch-icon diffusion">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M4.5 16.5c-1.5 1.26-2 3.1 -1 4.5s3.1 1.67 4.5.3 2.1-3.21 1.1-4.7-3.1-1.36-4.6-.1z" />
<path d="M15 7c-1.5 1.26-2 3.1 -1 4.5s3.1 1.67 4.5.3 2.1-3.21 1.1-4.7-3.1-1.36-4.6-.1z" />
<path d="M8 8c-1.5 1.26-2 3.1 -1 4.5s3.1 1.67 4.5.3 2.1-3.21 1.1-4.7-3.1-1.36-4.6-.1z" />
</svg>
</div>
<div class="branch-info">
<div class="branch-name">Diffusion Branch <span class="branch-tag">Signal</span></div>
<div class="branch-desc">Noise residual & denoising trace analysis</div>
<div class="branch-bar-wrap">
<div class="branch-bar" id="bar-diffusion"></div>
</div>
</div>
<div class="branch-score-col">
<div class="branch-prob" id="prob-diffusion"></div>
<div class="branch-conf" id="conf-diffusion"></div>
<div class="branch-weight" id="weight-diffusion"></div>
</div>
</div>
</div>
<!-- Explainability Visualizations -->
<div class="viz-section">
<div class="section-label">STEP 3 β€” EXPLAINABILITY VISUALIZATIONS</div>
<div class="viz-grid">
<div class="viz-card" id="viz-gradcam">
<div class="viz-label" id="gradcam-label">Saliency Heatmap</div>
<div class="viz-sub" id="gradcam-sub">Suspicious regions highlighted</div>
<div class="viz-img-wrap">
<img id="img-gradcam" class="viz-img" alt="Grad-CAM / Saliency heatmap" />
<div class="viz-unavailable" id="gradcam-unavail" style="display:none">
⚠ Visualization unavailable
</div>
</div>
</div>
<div class="viz-card">
<div class="viz-label">Spectral Heatmap (FFT)</div>
<div class="viz-sub">Frequency-domain anomaly map</div>
<div class="viz-img-wrap">
<img id="img-spectrum" class="viz-img" alt="FFT Spectral heatmap" />
</div>
</div>
<div class="viz-card">
<div class="viz-label">Spectral Annotated</div>
<div class="viz-sub">High-frequency peak markers</div>
<div class="viz-img-wrap">
<img id="img-spectrum-ann" class="viz-img" alt="Annotated spectrum" />
</div>
</div>
<div class="viz-card">
<div class="viz-label">Diffusion Noise Map</div>
<div class="viz-sub">Residual denoising traces</div>
<div class="viz-img-wrap">
<img id="img-noise" class="viz-img" alt="Noise residual map" />
</div>
</div>
<div class="viz-card">
<div class="viz-label">Edge Map</div>
<div class="viz-sub">Structural edge forensics</div>
<div class="viz-img-wrap">
<img id="img-edge" class="viz-img" alt="Edge map" />
</div>
</div>
</div>
</div>
<!-- Low Certainty Warning -->
<div class="warning-banner" id="lowCertaintyBanner" style="display:none">
⚠ <strong>Low Certainty:</strong> Branch signals are not strongly aligned.
Consider using a higher-resolution image for more reliable results.
</div>
<!-- Analyze Another -->
<div style="text-align:center; margin-top:2.5rem">
<button class="btn-analyze" id="analyzeAnotherBtn" onclick="resetUI()">
πŸ”„ Analyze Another Image
</button>
</div>
</section>
<!-- ── Error Panel ─────────────────────────────────────────── -->
<div class="error-banner" id="errorBanner" style="display:none">
<span class="error-icon">⚠</span>
<span id="errorMsg"></span>
</div>
</main>
<!-- ── How It Works Strip ─────────────────────────────────── -->
<section class="how-section">
<div class="how-inner">
<div class="how-step">
<div class="how-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" />
</svg>
</div>
<div class="how-title">Upload</div>
<div class="how-desc">Drag & drop any image β€” real photo or AI-generated</div>
</div>
<div class="how-arrow">β†’</div>
<div class="how-step">
<div class="how-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10" />
<path d="M12 16v-4M12 8h.01" />
</svg>
</div>
<div class="how-title">5-Branch Analysis</div>
<div class="how-desc">Spectral Β· Edge Β· CNN Β· ViT Β· Diffusion run in parallel</div>
</div>
<div class="how-arrow">β†’</div>
<div class="how-step">
<div class="how-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
</svg>
</div>
<div class="how-title">Fusion</div>
<div class="how-desc">Certainty-weighted probabilistic fusion</div>
</div>
<div class="how-arrow">β†’</div>
<div class="how-step">
<div class="how-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 20V10M12 20V4M6 20v-6" />
</svg>
</div>
<div class="how-title">Results</div>
<div class="how-desc">Prediction, confidence & explainability maps</div>
</div>
</div>
</section>
<!-- ── Footer ─────────────────────────────────────────────── -->
<footer class="footer">
<div class="footer-grid">
<div class="footer-col">
<div class="footer-brand">
<svg class="footer-brand-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2l9 4.5v9L12 20l-9-4.5v-9L12 2z" />
</svg>
<span class="footer-brand-name">ImageForensics<span class="footer-brand-accent">Detect</span></span>
</div>
<p class="footer-tagline">Research-grade multi-branch AI image forensics system for detecting AI-generated
content.</p>
<div class="footer-badge-row">
<span class="footer-chip">B.Tech Final Year</span>
<span class="footer-chip">IEEE-Grade</span>
<span class="footer-chip">CIFAKE 120K</span>
</div>
</div>
<div class="footer-col">
<div class="footer-col-title">Tech Stack</div>
<ul class="footer-list">
<li><svg class="footer-icon">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
</svg> TensorFlow 2 Β· EfficientNet-B0</li>
<li><svg class="footer-icon">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
</svg> PyTorch 2 Β· ViT-B/16 Β· timm</li>
<li><svg class="footer-icon">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
</svg> FastAPI Β· Uvicorn</li>
<li><svg class="footer-icon">
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2zM12 8v8M8 12h8" />
</svg> OpenCV Β· NumPy Β· SciPy</li>
<li><svg class="footer-icon">
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
<rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
</svg> scikit-learn Β· Matplotlib</li>
<li><svg class="footer-icon">
<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z" />
<path d="M12 6v12M6 12h12" />
</svg> HTML5 Β· CSS3 Β· Vanilla JS</li>
</ul>
</div>
<div class="footer-col divider">
<div class="footer-col-title">Detection Branches</div>
<ul class="footer-list highlight">
<li><svg class="footer-icon spectral">
<path d="M2 10s3-3 3-3 2 1 2 1 3-3 3-3 2 1 2 1 3-3 3-3" />
<path d="M22 14s-3 3-3 3-2-1-2-1-3 3-3 3-2-1-2-1-3 3-3 3" />
</svg> Spectral β€” FFT/DCT</li>
<li><svg class="footer-icon edge">
<path d="M12 3v18M3 12h18M18 9l-3 3 3 3M6 9l3 3-3 3" />
</svg> Edge β€” Sobel/Laplacian</li>
<li><svg class="footer-icon cnn">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
<path d="M12 8v4M12 16h.01" />
</svg> CNN β€” Texture & Patches</li>
<li><svg class="footer-icon vit">
<circle cx="12" cy="12" r="3" />
<path d="M12 5V3M12 21v-2M5 12H3m18 0h-2M7 7L5.6 5.6m12.8 12.8L17 17M7 17l-1.4 1.4M18.4 5.6L17 7" />
</svg> ViT β€” Global Semantics <span class="footer-accuracy">99.30%</span></li>
<li><svg class="footer-icon diffusion">
<path d="M4.5 16.5c-1.5 1.26-2 3.1 -1 4.5s3.1 1.67 4.5.3 2.1-3.21 1.1-4.7-3.1-1.36-4.6-.1z" />
<path d="M15 7c-1.5 1.26-2 3.1 -1 4.5s3.1 1.67 4.5.3 2.1-3.21 1.1-4.7-3.1-1.36-4.6-.1z" />
</svg> Diffusion β€” Noise Residuals</li>
<li><svg class="footer-icon fusion">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
</svg> Fusion β€” Certainty-Weighted</li>
</ul>
</div>
<div class="footer-col divider">
<div class="footer-col-title">Research References</div>
<ul class="footer-list mini">
<li>Wang et al. (2020) β€” CNN</li>
<li>Frank et al. (2020) β€” FFT</li>
<li>Corvi et al. (2023) β€” Diffusion</li>
<li>Ojha et al. (2023) β€” Universal Det.</li>
<li>Selvaraju et al. (2017) β€” Grad-CAM</li>
</ul>
<div class="footer-col-title" style="margin-top:1.5rem">Dataset</div>
<ul class="footer-list mini">
<li>CIFAKE β€” 120K images</li>
<li>Stable Diffusion v1.4 generated</li>
</ul>
</div>
</div>
<div class="footer-bar">
<div class="footer-bar-left">Β© 2024 ImageForensics-Detect Β· B.Tech Final Year Project</div>
<div class="footer-bar-center">Built with ❀️ using Python · TensorFlow · PyTorch · FastAPI</div>
<div class="footer-bar-right">Multi-branch certainty-weighted probabilistic fusion</div>
</div>
</footer>
<!-- app.js is in the frontend directory, served at /static/app.js -->
<script src="/static/app.js"></script>
</body>
</html>