JamesNR/patchnet
0
1<!DOCTYPE html>2<html lang="en">3 4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>PatchNet — AI Image Quality Assessment</title>8 <meta name="description" content="Assess AI-generated image quality, consistency, and authenticity using PatchNet.">9 <link rel="preconnect" href="https://fonts.googleapis.com">10 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">11 <link rel="stylesheet" href="/static/style.css">12</head>13 14<body>15 <div class="app">16 <!-- Header -->17 <header class="header">18 <div class="header-inner">19 <div class="logo">20 <div class="logo-icon">P</div>21 <div>22 <h1>PatchNet</h1>23 <span class="subtitle">AI-Generated Image Quality Assessment</span>24 </div>25 </div>26 </div>27 </header>28 29 <!-- Main Content -->30 <main class="main">31 <!-- Upload Section -->32 <section class="upload-section card">33 <form id="predict-form">34 <div class="form-grid">35 <!-- Image Upload -->36 <div class="upload-area" id="drop-zone">37 <div class="upload-placeholder" id="upload-placeholder">38 <div class="upload-icon">39 <svg width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5"40 viewBox="0 0 24 24">41 <path d="M12 16V4m0 0L8 8m4-4 4 4" stroke-linecap="round"42 stroke-linejoin="round" />43 <path d="M20 16v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2" stroke-linecap="round"44 stroke-linejoin="round" />45 </svg>46 </div>47 <p class="upload-text">Drop an image here or <span class="upload-link">browse</span></p>48 <p class="upload-hint">PNG, JPG up to 10MB</p>49 </div>50 <img id="preview-img" class="preview-img hidden" alt="Preview">51 <input type="file" id="file-input" accept="image/*" hidden>52 </div>53 54 <!-- Prompt + Submit -->55 <div class="form-controls">56 <div class="input-group">57 <label for="prompt-input">Text Prompt</label>58 <input type="text" id="prompt-input" placeholder='e.g. "a high quality photo of a cat"'59 required>60 </div>61 <button type="submit" id="submit-btn" class="btn-primary" disabled>62 <span class="btn-text">Analyse Image</span>63 <span class="btn-loading hidden">64 <span class="spinner"></span> Processing…65 </span>66 </button>67 </div>68 </div>69 </form>70 </section>71 72 <!-- Results Section (hidden until prediction) -->73 <section class="results-section hidden" id="results-section">74 75 <!-- Scores -->76 <div class="scores-grid">77 <div class="score-card card" id="score-consistency">78 <div class="score-label">Consistency</div>79 <div class="score-ring">80 <svg viewBox="0 0 120 120">81 <circle class="ring-bg" cx="60" cy="60" r="52" />82 <circle class="ring-fill" cx="60" cy="60" r="52" id="ring-consistency" />83 </svg>84 <div class="score-value" id="val-consistency">—</div>85 </div>86 <div class="score-desc">Text-image alignment</div>87 </div>88 89 <div class="score-card card" id="score-quality">90 <div class="score-label">Quality</div>91 <div class="score-ring">92 <svg viewBox="0 0 120 120">93 <circle class="ring-bg" cx="60" cy="60" r="52" />94 <circle class="ring-fill" cx="60" cy="60" r="52" id="ring-quality" />95 </svg>96 <div class="score-value" id="val-quality">—</div>97 </div>98 <div class="score-desc">Perceptual quality</div>99 </div>100 101 <div class="score-card card" id="score-authenticity">102 <div class="score-label">Authenticity</div>103 <div class="score-ring">104 <svg viewBox="0 0 120 120">105 <circle class="ring-bg" cx="60" cy="60" r="52" />106 <circle class="ring-fill" cx="60" cy="60" r="52" id="ring-authenticity" />107 </svg>108 <div class="score-value" id="val-authenticity">—</div>109 </div>110 <div class="score-desc">Realism score</div>111 </div>112 </div>113 114 <!-- Annotated Image -->115 <div class="card annotated-section">116 <h2>Annotated Image</h2>117 <p class="card-subtitle">118 <span class="legend-dot legend-grid"></span> Grid patches119 <span class="legend-dot legend-surf"></span> SURF keypoints120 </p>121 <div class="annotated-wrapper">122 <img id="annotated-img" alt="Annotated image with patches">123 </div>124 <div class="patch-info">125 <span id="info-grid">—</span> | <span id="info-surf">—</span>126 </div>127 </div>128 129 <!-- SURF Patches gallery -->130 <div class="card patches-section">131 <h2>Extracted SURF Patches</h2>132 <div class="patches-gallery" id="surf-gallery"></div>133 </div>134 </section>135 </main>136 137 <!-- Footer -->138 <footer class="footer">139 <p>PatchNet · MOS scale 0–5</p>140 </footer>141 </div>142 143 <script src="/static/app.js"></script>144</body>145 146</html>