Hugging Face's logo

Spaces:
toasted1920
/
GitRead
Sleeping

App Files Community
1
GitRead / front_end /index.html
toasted1920's picture
toasted1920
Add bring-your-own-key LLMs, ONNX code embeddings and security hardening
5e9ddc1
Raw History Blame Contribute Delete
11 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="google-site-verification" content="_CvoeGZpbovBxUEP0cqbDurSo3JkZMmCBoQPxRxsUI4" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GitRead — Chat with any GitHub Repository</title>
<!-- ═══ SEO TAGS ═══ -->
<meta name="description" content="GitRead lets you chat with any GitHub repository using AI. Paste a URL, understand the codebase instantly. No docs needed." />
<meta name="keywords" content="gitread, github, ai, code analysis, chat with code, codebase, repository, ai tool, developer tool" />
<meta name="author" content="GitRead" />
<meta name="robots" content="index, follow" />
<!-- ═══ OPEN GRAPH (LinkedIn, WhatsApp, Facebook previews) ═══ -->
<meta property="og:title" content="GitRead — Chat with any GitHub Repository" />
<meta property="og:description" content="Paste a GitHub URL, chat with the codebase instantly. No docs needed." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://gitread.onrender.com" />
<!-- ═══ TWITTER CARD ═══ -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="GitRead — Chat with any GitHub Repository" />
<meta name="twitter:description" content="Paste a GitHub URL, chat with the codebase instantly. No docs needed." />
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Syne:wght@400;600;700;800&display=swap" rel="stylesheet" />
</head>
<body>
<!-- ═══ CANVAS BACKGROUND ═══ -->
<canvas id="bgCanvas"></canvas>
<!-- ═══ TOP ACCENT LINE ═══ -->
<div class="top-accent-line"></div>
<!-- ═══ HEADER ═══ -->
<header id="header">
<div class="logo">
<div class="logo-mark">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- back square — ghost outline, offset bottom-right -->
<rect x="10" y="10" width="20" height="20" rx="5" fill="none" stroke="var(--accent)" stroke-width="1.5" opacity="0.4"/>
<!-- front square — solid orange -->
<rect x="2" y="2" width="20" height="20" rx="5" fill="var(--accent)"/>
</svg>
</div>
<span class="logo-text">GITREAD</span>
</div>
<div class="header-right">
<button id="settingsBtn" class="settings-btn" type="button" aria-label="LLM settings" title="LLM provider &amp; API key">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="8" cy="15" r="4" stroke="currentColor" stroke-width="2"/><path d="M10.8 12.2 20 3m-3 3 3 3m-6 0 3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span id="settingsLabel">Add API key</span>
</button>
<div class="status-pill" id="statusPill">
<span class="status-dot" id="statusDot"></span>
<span class="status-label" id="statusLabel">idle</span>
</div>
</div>
</header>
<!-- ═══ WARNING BANNER ═══ -->
<div id="warningBanner" class="warning-banner hidden">
<span class="warn-icon">⚠</span>
<span>Repository too large to fully analyse — accuracy may be limited</span>
<button id="dismissWarning" aria-label="Dismiss">✕</button>
</div>
<!-- ═══ CORNER BRACKETS ═══ -->
<div class="corner-bracket tl"></div>
<div class="corner-bracket tr"></div>
<div class="corner-bracket bl"></div>
<div class="corner-bracket br"></div>
<!-- ═══ MAIN ═══ -->
<main id="mainSection">
<!-- PAGE 1: Landing -->
<section id="landingPage" class="page active">
<div class="landing-inner">
<div class="hero-eyebrow">
<span class="eyebrow-dot"></span>
<span>Git Intelligence</span>
</div>
<h1 class="hero-title">
<span class="title-line">Git it.</span>
<span class="title-line accent-line">Get it.</span>
<span class="title-line orange-line">GitRead.</span>
</h1>
<p class="hero-sub">Paste a GitHub URL · Chat with the codebase · No docs needed</p>
<div class="input-card">
<div class="input-wrap">
<span class="input-icon">
<svg width="18" height="18" viewBox="0 0 92 92" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M90.156 41.965L50.036 1.848a5.918 5.918 0 00-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 017.264 1.686 7.043 7.043 0 011.679 7.29l10.183 10.184a7.026 7.026 0 017.285 1.672 7.043 7.043 0 010 9.957 7.045 7.045 0 01-9.961 0 7.049 7.049 0 01-1.528-7.661l-9.5-9.499v24.997a7.044 7.044 0 011.86 11.29 7.042 7.042 0 01-9.957 0 7.043 7.043 0 011.86-11.29V33.768a7.034 7.034 0 01-1.86-11.294 7.046 7.046 0 017.665-1.524L40.137 10.47 1.844 48.76a5.92 5.92 0 000 8.371L41.964 97.25a5.918 5.918 0 008.372 0l39.82-39.82a5.92 5.92 0 000-8.465z" fill="currentColor"/>
</svg>
</span>
<input
type="text"
id="repoInput"
placeholder="https://github.com/owner/repository"
autocomplete="off"
spellcheck="false"
/>
</div>
<button id="analyseBtn" type="button" class="analyse-btn">
<span>Analyse</span>
<svg class="btn-arrow-icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M3 8H13M13 8L9 4M13 8L9 12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
<div class="landing-hints">
<span class="hint-chip">⚡ How to run</span>
<span class="hint-chip">🧠 Architecture</span>
<span class="hint-chip">🔌 Dependencies</span>
<span class="hint-chip">🎯 Entry points</span>
<span class="hint-chip">💀 Find the bugs</span>
<span class="hint-chip">🗺 Code map</span>
</div>
</div>
</section>
<!-- PAGE 2: Processing -->
<section id="processingPage" class="page">
<div class="processing-inner">
<div class="processing-header">
<div class="proc-spinner">
<svg class="spinner-ring" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20" fill="none" stroke="var(--accent)" stroke-width="2.5" stroke-dasharray="80 45" stroke-linecap="round"/>
</svg>
</div>
<div class="proc-meta">
<span class="proc-title">Analysing Repository</span>
<span class="proc-subtitle" id="procSubtitle">Connecting to GitHub…</span>
</div>
</div>
<div id="stepsContainer" class="steps-container"></div>
</div>
</section>
<!-- PAGE 3: Chat -->
<section id="chatPage" class="page">
<div id="chatMessages" class="chat-messages"></div>
</section>
</main>
<!-- ═══ SETTINGS MODAL (Bring your own key) ═══ -->
<div id="settingsModal" class="modal-backdrop hidden" role="dialog" aria-modal="true" aria-labelledby="settingsTitle">
<form id="settingsForm" class="modal-card" autocomplete="off" novalidate>
<div class="modal-head">
<h2 id="settingsTitle">LLM settings</h2>
<button type="button" id="settingsClose" class="modal-close" aria-label="Close">✕</button>
</div>
<p class="modal-desc">GitRead uses <strong>your own</strong> API key. It is sent only with your chat requests over HTTPS, used for that request, and never stored on the server.</p>
<label class="field-label" for="providerSelect">Provider</label>
<select id="providerSelect" class="field-input">
<option value="google">Google Gemini</option>
<option value="openai">OpenAI</option>
<option value="anthropic">Anthropic Claude</option>
</select>
<label class="field-label" for="modelInput">Model <span class="field-hint">(leave blank for default)</span></label>
<input id="modelInput" class="field-input" type="text" maxlength="100" spellcheck="false" />
<label class="field-label" for="apiKeyInput">API key</label>
<input id="apiKeyInput" class="field-input" type="password" maxlength="300" spellcheck="false" autocomplete="off" placeholder="Paste your key" />
<a id="keyHelpLink" class="field-help" href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer">Get a key →</a>
<label class="field-check"><input id="rememberKey" type="checkbox" /> Remember on this device <span class="field-hint">(otherwise cleared when you close the tab)</span></label>
<p id="settingsError" class="field-error hidden" role="alert"></p>
<div class="modal-actions">
<button type="button" id="clearKeyBtn" class="modal-btn-secondary">Forget key</button>
<button type="submit" class="analyse-btn"><span>Save</span></button>
</div>
</form>
</div>
<!-- ═══ BOTTOM BAR ═══ -->
<div class="bottom-bar" id="bottomBar">
<div class="bar-item"><span class="bar-dot" style="background:#d94f00"></span>Vector Search + LangGraph</div>
<div class="bar-item"><span class="bar-dot" style="background:#ff6a00"></span>Bring Your Own Key</div>
<div class="bar-item"><span class="bar-dot" style="background:#d94f00"></span>Local Embeddings</div>
</div>
<!-- ═══ FOOTER ═══ -->
<footer id="footer" class="hidden">
<div class="chat-input-card">
<textarea
id="chatInput"
placeholder="Ask anything about this repository…"
rows="1"
autocomplete="on"
spellcheck="false"
></textarea>
<button id="sendBtn" class="send-btn" aria-label="Send">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
<path d="M16 2L2 7.5L8 9.5M16 2L10.5 16L8 9.5M16 2L8 9.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
<div class="footer-hint">Press <kbd>Enter</kbd> to send · <kbd>Shift+Enter</kbd> for new line</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"
integrity="sha512-pmjEJQ7CveksANaAKdCJZMig7eAcCFFzE1b5XnlnxdB/vU3AOStJ5SF7w4tFuqskuU31ETnAaWTYRQOYg2WHKw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.4.17/purify.min.js"
integrity="sha512-2wT0W6vojz3cJuLoa/DxrPVQRinkfRjFWMWIDK4NghTqObEhpem1nEkeK0d9ZE+/hyvfMNuJZlfxM4LsRgeoSA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="app.js"></script>
<script src="bg.js"></script>
</body>
</html>