Spaces:
Running
Running
| <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> |