Spaces:
Running
Running
File size: 11,356 Bytes
4fd257f 259696a 4fd257f 259696a 4fd257f 259696a 4fd257f 259696a 4fd257f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>I Made The Best Proxy And It Is Just An HTML File | FMN-GPT - CompactAI</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500:600:700&family=Geist+Mono&display=swap" rel="stylesheet">
<style>
:root {
--blue-900: #000000;
--blue-800: #0a0a0a;
--blue-700: #111111;
--blue-600: #1a1a1a;
--blue-500: #333333;
--blue-400: #555555;
--blue-300: #777777;
--blue-200: #888888;
--blue-100: #aaaaaa;
--white: #ffffff;
--white-soft: #f5f5f5;
--white-muted: #e0e0e0;
--grid-line: rgba(255, 255, 255, 0.03);
--grid-line-major: rgba(255, 255, 255, 0.06);
--accent: #ededed;
--accent-muted: #888888;
--font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
--container-max: 1100px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--accent); }
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
nav .container { display: flex; justify-content: space-between; align-items: center; }
.nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
.nav-brand span { color: var(--accent); }
.nav-links { display: flex; gap: 32px; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
.nav-links a:hover { color: var(--white); }
.post { padding: 140px 0 80px; }
.post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
.post-back:hover { color: var(--accent); }
.post-back::before { content: '← '; }
.post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
.post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
.post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--white); background: rgba(255, 255, 255, 0.08); padding: 4px 10px; border-radius: 4px; }
.post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
.post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
.post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
.post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
.post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
.post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
.post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
.code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
.code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
.cta-box { background: var(--blue-800); border: 2px solid var(--accent); border-radius: 12px; padding: 24px; margin: 32px 0; text-align: center; }
.cta-box a { color: var(--accent); font-weight: 600; font-size: 18px; word-break: break-all; }
.cta-box a:hover { color: var(--white); }
.cta-box p { margin: 12px 0 0; color: var(--blue-200); font-size: 14px; }
.post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
.post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
footer a { color: var(--blue-200); }
footer a:hover { color: var(--accent); }
@media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
</style>
</head>
<body>
<nav>
<div class="container">
<a href="index.html" class="nav-brand"><span>/</span>FMN-GPT</a>
<div class="nav-links">
<a href="blog.html">Blog</a>
<a href="status.html">Model Status</a>
<a href="https://huggingface.co/CompactAI-O" target="_blank">HuggingFace Org</a>
</div>
</div>
</nav>
<main>
<article class="post">
<div class="container">
<a href="blog.html" class="post-back">Back to Blog</a>
<header>
<div class="post-meta">
<span class="post-date">2026-04-15</span>
<span class="post-tag">Side Projects</span>
</div>
<h1>I Made The Best Proxy And It Is Just An HTML File</h1>
</header>
<div class="post-body">
<p>I made a proxy. It is the best proxy. It works on any device. You just double click the HTML file. That is it. No installation. No configuration. No terminal commands. Just double click and go.</p>
<blockquote>
<p>When you spend weeks training tiny models and then build a proxy in an afternoon because you got bored, you realize your priorities are flexible. Or broken. Both can be true.</p>
</blockquote>
<h2>How It Works</h2>
<p>The proxy is a single HTML file. You download it. You double click it. Your browser opens. The proxy loads. You type a URL. The proxy fetches it. You see the page. Magic.</p>
<div class="code-block">
<span class="comment"># Usage instructions because I like being helpful</span><br>
Step 1: Download proxy.html<br>
Step 2: Double click proxy.html<br>
Step 3: Type a URL<br>
Step 4: Watch it work<br>
Step 5: Tell your friends<br>
<span class="comment"># Simple. Elegant. Probably naive about network security.</span>
</div>
<p>It works on Windows. It works on Mac. It works on Linux. It works on Chromebooks. It works on phones if your phone lets you open local HTML files. It works on tablets. It works on smart fridges if your smart fridge has a browser. I have not tested the fridge part. But I believe in the power of HTML.</p>
<h2>Why I Made This</h2>
<p>I was bored. I was waiting for Haiku to finish SPIN training. I was waiting for Sonnet to train. I was waiting for cAI-Grid to not be complicated anymore. So I made a proxy.</p>
<p>Also I needed a proxy. For reasons. Reasons that are none of your business. Reasons that involve testing things. Reasons that involve not wanting to configure a full proxy server just to check one website.</p>
<blockquote>
<p>Sometimes the best solutions are the simplest ones. Sometimes the simplest ones are just HTML files you double click. Sometimes simplicity is just laziness with better branding.</p>
</blockquote>
<h2>What It Can Do</h2>
<p>It proxies requests. It fetches pages. It displays content. It handles basic redirects. It does not handle everything. It does not handle authentication. It does not handle complex JavaScript. It does not handle your specific edge case. But it handles the common cases. That is enough for me.</p>
<p>The proxy is lightweight. It is fast. It does not phone home. It does not collect data. It does not track you. It just proxies. That is all. That is the promise. That is the product.</p>
<h2>Where To Get It</h2>
<div class="cta-box">
<a href="https://github.com/nautilus-os" target="_blank">https://github.com/nautilus-os</a>
<p>Check here for updates. Check here for the release. Check here to see if I actually finished it or just talked about it. Progress is weird. Releases are weirder.</p>
</div>
<p>The proxy lives at GitHub.com/nautilus-os. That is where updates will appear. That is where the release will happen. That is where you can watch me commit code at three AM because I cannot sleep. That is the journey.</p>
<h2>What Comes Next</h2>
<p>I will keep working on it. I will add features. I will fix bugs. I will break things. I will fix them again. This is the cycle. This is development. This is how software happens.</p>
<p>Maybe I will add authentication. Maybe I will add JavaScript support. Maybe I will add a UI that does not look like it was designed in 2003. Maybe I will leave it exactly as is because simplicity is a feature. All outcomes are possible.</p>
<h2>Final Thoughts</h2>
<p>I made a proxy. It is the best proxy. It works on any device. You just double click the HTML file. That is the pitch. That is the product. That is the promise.</p>
<p>Check GitHub.com/nautilus-os for updates. Check it for the release. Check it to see if I am still working on it or if I got distracted by another tiny model. Progress is weird. Proxies are weird. HTML files are weird. Everything is weird.</p>
<p>If you need a proxy, try this one. If you do not need a proxy, try it anyway. See what happens. See if it works. See if it breaks. See if it changes how you think about proxies. Or see if it just works and you move on. Both outcomes are valid.</p>
<hr>
</div>
<footer class="post-footer">
<p>Current status: Proxy built. HTML file ready. Double click tested. GitHub repo waiting. Haiku still SPINning. Progress is weird. Simplicity is king.</p>
</footer>
</div>
</article>
</main>
<footer>
<div class="container">
<p>Built with curiosity over compute</p>
<p>FMN-GPT by <a href="https://huggingface.co/CompactAI-O" target="_blank">CompactAI-O</a> | 2026</p>
</div>
</footer>
</body>
</html> |