Hugging Face's logo

Spaces:
build-small-hackathon
/
GharScan
Paused

App Files Community
GharScan / static /index.html
Ritvik Shrivastava
feat: initial GharScan deployment
41c0a9e
Raw
History Blame Contribute Delete
9.43 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
 <title>GharScan β€” Wall Defect Inspector</title>
 <link rel="stylesheet" href="/static/styles.css" />
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
</head>
<body>
<!-- ╔══════════════════════════════╗ -->
<!-- β•‘ HEADER β•‘ -->
<!-- β•šβ•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β• -->
<header class="site-header">
 <div class="header-inner">
 <div class="brand">
 <span class="brand-icon">πŸ—οΈ</span>
 <div>
 <h1 class="brand-name">GharScan</h1>
 <p class="brand-tagline">AI Building Defect Inspector Β· India</p>
 </div>
 </div>
 <div class="model-badge">
 <span class="model-dot"></span>
 <span class="mono">MiniCPM-V 2.0 Β· 2.8B</span>
 </div>
 </div>
</header>
<!-- ╔══════════════════════════════╗ -->
<!-- β•‘ CAPTURE ZONE β•‘ -->
<!-- β•šβ•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β• -->
<main class="app-main">
 <section class="capture-section" id="captureSection">
 <p class="section-label mono">// STEP 1 β€” PHOTOGRAPH THE DEFECT</p>
<div class="capture-card" id="dropZone">
 <div class="capture-preview" id="capturePreview">
 <div class="capture-placeholder" id="capturePlaceholder">
 <span class="placeholder-icon">πŸ“·</span>
 <p>Point at any crack, stain, or damage on your wall, ceiling, or floor</p>
 </div>
 <img id="previewImg" class="preview-image hidden" alt="Uploaded defect image" />
 </div>
<div class="capture-actions">
 <!-- Mobile: opens rear camera directly via capture="environment" -->
 <label class="btn btn-primary" for="cameraInput">
 <span>πŸ“Έ</span> Take Photo
 </label>
 <input
 type="file"
 id="cameraInput"
 accept="image/*"
 capture="environment"
 hidden
 />
<label class="btn btn-secondary" for="uploadInput">
 <span>πŸ“</span> Upload Image
 </label>
 <input
 type="file"
 id="uploadInput"
 accept="image/jpeg,image/png,image/webp"
 hidden
 />
 </div>
<div class="language-toggle">
 <span class="toggle-label">Output language:</span>
 <button class="lang-btn active" data-lang="en" onclick="setLang('en')">English</button>
 <button class="lang-btn" data-lang="hi" onclick="setLang('hi')">ΰ€Ήΰ€Ώΰ€‚ΰ€¦ΰ₯€</button>
 </div>
 </div>
<button class="btn btn-analyze" id="analyzeBtn" disabled onclick="runAnalysis()">
 <span id="analyzeBtnIcon">πŸ”</span>
 <span id="analyzeBtnText">Analyse Defect</span>
 </button>
 </section>
<!-- ╔══════════════════════════════╗ -->
 <!-- β•‘ LOADING STATE β•‘ -->
 <!-- β•šβ•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β• -->
 <section class="loading-section hidden" id="loadingSection">
 <div class="loading-card">
 <div class="loading-spinner"></div>
 <p class="loading-title" id="loadingTitle">Initialising inspector…</p>
 <p class="loading-sub mono" id="loadingSub">Step 1 of 3: Classifying defect type</p>
 <div class="loading-steps">
 <div class="load-step" id="step1" data-active="true">πŸ” Defect Classification</div>
 <div class="load-step" id="step2">πŸ“Š Severity Assessment</div>
 <div class="load-step" id="step3">β‚Ή Cost Estimation</div>
 </div>
 </div>
 </section>
<!-- ╔══════════════════════════════╗ -->
 <!-- β•‘ INSPECTION REPORT β•‘ -->
 <!-- β•šβ•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β• -->
 <section class="report-section hidden" id="reportSection">
 <p class="section-label mono">// INSPECTION REPORT</p>
<!-- Structural risk banner (shown only when is_structural = true) -->
 <div class="structural-banner danger hidden" id="structuralBanner">
 <span class="banner-icon">⚠️</span>
 <div>
 <strong>STRUCTURAL RISK DETECTED</strong>
 <p id="structuralReasoning"></p>
 </div>
 </div>
<!-- Safe banner (shown when is_structural = false) -->
 <div class="structural-banner safe hidden" id="safeBanner">
 <span class="banner-icon">βœ…</span>
 <strong>Not Structural β€” No Immediate Safety Risk</strong>
 </div>
<!-- Main report card -->
 <div class="report-card">
<!-- Header row: defect label + severity chip -->
 <div class="report-header">
 <div>
 <span class="defect-label" id="defectLabel">Settlement Crack</span>
 <span class="defect-type-sub mono" id="defectTypeSub"></span>
 </div>
 <div class="severity-chip" id="severityChip">
 <span class="severity-num" id="severityNum">2</span>
 <span class="severity-word" id="severityWord">Minor</span>
 </div>
 </div>
<!-- Severity meter bar -->
 <div class="severity-meter-wrap">
 <div class="severity-track">
 <div class="severity-fill" id="severityFill"></div>
 </div>
 <div class="severity-ticks">
 <span>Cosmetic</span><span></span><span>Moderate</span><span></span><span>Critical</span>
 </div>
 </div>
<div class="report-divider"></div>
<!-- Description row -->
 <div class="report-row">
 <span class="row-key mono">WHAT IT IS</span>
 <span class="row-val" id="defectDescription"></span>
 </div>
<div class="report-row">
 <span class="row-key mono">WHY IT HAPPENS</span>
 <span class="row-val" id="primaryCause"></span>
 </div>
<div class="report-divider"></div>
<!-- Action row (highlighted) -->
 <div class="report-row action-highlight">
 <span class="row-key mono">WHAT TO DO</span>
 <span class="row-val action-text" id="immediateAction"></span>
 </div>
<div class="report-row">
 <span class="row-key mono">WHEN TO ACT</span>
 <span class="row-val urgency-text" id="urgencyDisplay"></span>
 </div>
<div class="report-divider"></div>
<!-- Cost + Professional -->
 <div class="cost-block">
 <div class="cost-main">
 <span class="cost-rupee">β‚Ή</span>
 <span class="cost-range" id="costRange"></span>
 </div>
 <div class="professional-line">
 <span class="pro-icon">πŸ‘·</span>
 <span id="professionalDisplay">Licensed Mason</span>
 </div>
 </div>
<!-- Monsoon risk flag -->
 <div class="monsoon-warning hidden" id="monsoonWarning">
 🌧️ <strong>Monsoon Risk:</strong> This defect worsens significantly during heavy rainfall.
 Address before June if possible.
 </div>
</div><!-- end report-card -->
<!-- Liability disclaimer β€” ALWAYS shown for Severity 4-5 (Watch-Out 2) -->
 <div class="liability-banner hidden" id="liabilityBanner">
 <span>⚠️</span>
 <p id="liabilityText"></p>
 </div>
<!-- Defect-specific disclaimer -->
 <div class="disclaimer-card hidden" id="disclaimerCard">
 <p id="disclaimerText"></p>
 </div>
<!-- Scan again -->
 <button class="btn btn-secondary btn-full" onclick="resetToCapture()">
 πŸ“Έ Scan Another Defect
 </button>
</section><!-- end report-section -->
<!-- ╔══════════════════════════════╗ -->
 <!-- β•‘ ERROR STATE β•‘ -->
 <!-- β•šβ•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β• -->
 <section class="error-section hidden" id="errorSection">
 <div class="error-card">
 <span class="error-icon">πŸ“·</span>
 <p class="error-title">Analysis Incomplete</p>
 <p class="error-msg" id="errorMsg">Please retake the photo with better lighting.</p>
 <button class="btn btn-secondary" onclick="resetToCapture()">Try Again</button>
 </div>
 </section>
</main>
<!-- ╔══════════════════════════════╗ -->
<!-- β•‘ FOOTER β•‘ -->
<!-- β•šβ•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β• -->
<footer class="site-footer">
 <p class="mono">MiniCPM-V 2.0 by OpenBMB Β· Fine-tuned for Indian residential defects</p>
 <p>πŸ—οΈ Built for <a href="https://huggingface.co/build-small-hackathon" target="_blank">Build Small Hackathon 2026</a> Β· Track: Backyard AI</p>
 <p class="disclaimer-footer">GharScan is a triage aid, not a substitute for professional structural assessment.</p>
</footer>
<script src="/static/app.js" type="module"></script>
</body>
</html>