index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <!-- Google tag (gtag.js) --> 5 <script async src="https://www.googletagmanager.com/gtag/js?id=G-CFP3KXWLNX"></script> 6 <script> 7 window.dataLayer = window.dataLayer || []; 8 function gtag(){dataLayer.push(arguments);} 9 gtag('js', new Date()); 10 11 gtag('config', 'G-CFP3KXWLNX'); 12 </script> 13 <meta charset="UTF-8"> 14 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 15 <title>RESTai — AI as a Service Platform</title> 16 <meta name="description" content="Create AI projects and consume them via a simple REST API. RAG, Agents, Visual Logic, Inference — all in one platform with a full Web UI."> 17 <meta property="og:title" content="RESTai — AI as a Service Platform"> 18 <meta property="og:description" content="Multi-project AI platform with RAG, Agents, MCP, Visual Logic Builder, and more. Full Web UI included."> 19 <meta property="og:image" content="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/templates.png"> 20 <link rel="icon" href="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/restai-logo.png"> 21 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> 22 <style> 23 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} 24 :root{ 25 --bg:#0a0a1a;--bg2:#111128;--bg3:#1a1a3e; 26 --text:#e2e8f0;--text2:#94a3b8;--text3:#64748b; 27 --accent1:#6366f1;--accent2:#8b5cf6;--accent3:#06b6d4; 28 --glow:rgba(99,102,241,0.15); 29 --radius:16px;--radius-sm:10px; 30 } 31 html{scroll-behavior:smooth} 32 body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden} 33 a{color:var(--accent3);text-decoration:none;transition:color .2s} 34 a:hover{color:var(--accent1)} 35 img{max-width:100%;height:auto;display:block} 36 37 /* Nav */ 38 nav{position:fixed;top:0;left:0;right:0;z-index:100;backdrop-filter:blur(20px);background:rgba(10,10,26,.8);border-bottom:1px solid rgba(99,102,241,.1);transition:box-shadow .3s} 39 nav.scrolled{box-shadow:0 4px 30px rgba(0,0,0,.4)} 40 .nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;height:64px} 41 .nav-brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.2rem;color:#fff} 42 .nav-brand img{width:32px;height:32px} 43 .nav-links{display:flex;gap:1.5rem;align-items:center} 44 .nav-links a{color:var(--text2);font-size:.9rem;font-weight:500;transition:color .2s} 45 .nav-links a:hover{color:#fff} 46 .nav-cta{background:linear-gradient(135deg,var(--accent1),var(--accent2));color:#fff!important;padding:.45rem 1.2rem;border-radius:8px;font-weight:600;font-size:.85rem} 47 .nav-cta:hover{opacity:.9;color:#fff} 48 @media(max-width:768px){.nav-links{display:none}} 49 50 /* Hero */ 51 .hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8rem 2rem 4rem;position:relative;overflow:hidden} 52 .hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 20%,rgba(99,102,241,.15),transparent 70%),radial-gradient(ellipse 60% 50% at 80% 80%,rgba(6,182,212,.08),transparent);pointer-events:none} 53 .hero-glow{position:absolute;width:600px;height:600px;border-radius:50%;filter:blur(120px);opacity:.12;animation:float 8s ease-in-out infinite} 54 .hero-glow.g1{background:var(--accent1);top:-200px;left:-100px} 55 .hero-glow.g2{background:var(--accent3);bottom:-200px;right:-100px;animation-delay:4s} 56 @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(30px)}} 57 .hero-logo{width:160px;height:160px;margin-bottom:1.5rem;position:relative;z-index:1} 58 .hero h1{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;letter-spacing:-.03em;background:linear-gradient(135deg,#fff 30%,var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative;z-index:1} 59 .hero .tagline{font-size:clamp(1rem,2.5vw,1.4rem);color:var(--text2);max-width:700px;margin:1rem auto 2rem;position:relative;z-index:1;font-weight:300} 60 .hero-btns{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;position:relative;z-index:1} 61 .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 2rem;border-radius:12px;font-weight:600;font-size:1rem;transition:all .3s;border:none;cursor:pointer} 62 .btn-primary{background:linear-gradient(135deg,var(--accent1),var(--accent2));color:#fff;box-shadow:0 4px 20px rgba(99,102,241,.3)} 63 .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(99,102,241,.4);color:#fff} 64 .btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.2)} 65 .btn-outline:hover{border-color:var(--accent1);background:rgba(99,102,241,.1);color:#fff} 66 .hero-screenshot{margin-top:3rem;position:relative;z-index:1;max-width:1000px;border-radius:var(--radius);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px var(--glow)} 67 .hero-screenshot img{border-radius:var(--radius)} 68 69 /* Section */ 70 section{padding:6rem 2rem} 71 .container{max-width:1200px;margin:0 auto} 72 .section-badge{display:inline-block;padding:.3rem 1rem;border-radius:20px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;background:rgba(99,102,241,.12);color:var(--accent1);border:1px solid rgba(99,102,241,.2);margin-bottom:1rem} 73 .section-title{font-size:clamp(2rem,4vw,3rem);font-weight:800;margin-bottom:1rem;letter-spacing:-.02em} 74 .section-sub{font-size:1.1rem;color:var(--text2);max-width:700px;margin-bottom:3rem} 75 76 /* Why cards */ 77 .why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem} 78 .why-card{background:var(--bg2);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:2rem;transition:all .3s} 79 .why-card:hover{border-color:rgba(99,102,241,.3);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.3)} 80 .why-card .icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1rem} 81 .why-card h3{font-size:1.15rem;margin-bottom:.5rem;font-weight:700} 82 .why-card p{color:var(--text2);font-size:.95rem;line-height:1.6} 83 84 /* Feature sections */ 85 .feature{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;padding:4rem 0} 86 .feature.reverse{direction:rtl}.feature.reverse>*{direction:ltr} 87 .feature-text .section-badge{margin-bottom:.75rem} 88 .feature-text h2{font-size:1.8rem;font-weight:800;margin-bottom:1rem} 89 .feature-text p{color:var(--text2);margin-bottom:1rem;font-size:1rem;line-height:1.7} 90 .feature-text ul{list-style:none;margin-bottom:1rem} 91 .feature-text li{position:relative;padding-left:1.5rem;margin-bottom:.5rem;color:var(--text2);font-size:.95rem} 92 .feature-text li::before{content:'';position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--accent1)} 93 .feature-img{border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.4),0 0 20px var(--glow);transition:transform .3s} 94 .feature-img:hover{transform:scale(1.02)} 95 .feature-img img{border-radius:var(--radius);cursor:pointer} 96 .hero-screenshot img{cursor:pointer} 97 @media(max-width:900px){ 98 .feature{grid-template-columns:1fr;gap:2rem} 99 .feature.reverse{direction:ltr} 100 } 101 102 /* LLM grid */ 103 .llm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem} 104 .llm-card{background:var(--bg2);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-sm);padding:1.2rem;text-align:center;transition:all .3s} 105 .llm-card:hover{border-color:rgba(99,102,241,.3);transform:translateY(-2px)} 106 .llm-card .name{font-weight:700;font-size:1rem;margin-bottom:.2rem} 107 .llm-card .type{color:var(--text3);font-size:.8rem} 108 109 /* Quick start */ 110 .quickstart{background:var(--bg2);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:2.5rem;max-width:700px;margin:0 auto} 111 .quickstart pre{background:var(--bg);border-radius:var(--radius-sm);padding:1.5rem;overflow-x:auto;font-family:'JetBrains Mono',monospace;font-size:.9rem;line-height:1.8;color:var(--accent3);word-break:break-all;white-space:pre-wrap} 112 .quickstart .comment{color:var(--text3)} 113 @media(max-width:560px){ 114 .quickstart{padding:1.2rem} 115 .quickstart pre{padding:1rem;font-size:.78rem} 116 } 117 118 /* Footer */ 119 footer{border-top:1px solid rgba(255,255,255,.06);padding:3rem 2rem;text-align:center;color:var(--text3);font-size:.9rem} 120 footer a{color:var(--text2)} 121 .footer-badges{display:flex;gap:.5rem;justify-content:center;margin-top:1rem;flex-wrap:wrap} 122 123 /* Animations */ 124 .reveal{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease} 125 .reveal.visible{opacity:1;transform:translateY(0)} 126 127 /* Dual image */ 128 .feature-img-dual{display:grid;grid-template-columns:1fr;gap:1rem} 129 130 /* Screenshot carousel */ 131 .carousel-section{padding:4rem 2rem 2rem;overflow:hidden} 132 .carousel-wrap{max-width:1200px;margin:0 auto;overflow:hidden} 133 .carousel-track{display:flex;gap:1.2rem;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:1rem 0} 134 .carousel-track::-webkit-scrollbar{display:none} 135 .carousel-slide{flex:0 0 calc((100% - 2.4rem) / 3);position:relative;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;transition:transform .3s,box-shadow .3s;box-shadow:0 8px 30px rgba(0,0,0,.3)} 136 @media(max-width:900px){.carousel-slide{flex:0 0 calc((100% - 1.2rem) / 2)}} 137 @media(max-width:560px){.carousel-slide{flex:0 0 100%}} 138 .carousel-slide:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 50px rgba(0,0,0,.5),0 0 20px var(--glow)} 139 .carousel-slide img{width:100%;height:200px;object-fit:cover;display:block} 140 .carousel-slide .caption{position:absolute;bottom:0;left:0;right:0;padding:.5rem .8rem;background:linear-gradient(transparent,rgba(0,0,0,.85));font-size:.8rem;font-weight:600;color:#fff} 141 .carousel-dots{display:flex;justify-content:center;gap:.4rem;margin-top:1rem} 142 .carousel-dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.2);cursor:pointer;transition:all .3s;padding:0} 143 .carousel-dots button.active{background:var(--accent1);width:24px;border-radius:4px} 144 145 /* Lightbox */ 146 .lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;cursor:zoom-out;backdrop-filter:blur(10px)} 147 .lightbox.open{display:flex} 148 .lightbox img{max-width:92vw;max-height:90vh;border-radius:var(--radius);box-shadow:0 20px 80px rgba(0,0,0,.6)} 149 .lightbox .lb-caption{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);color:#fff;font-size:1rem;font-weight:600;text-shadow:0 2px 8px rgba(0,0,0,.6)} 150 .lightbox .lb-close{position:absolute;top:1.5rem;right:2rem;color:#fff;font-size:2rem;cursor:pointer;opacity:.7;transition:opacity .2s;background:none;border:none} 151 .lightbox .lb-close:hover{opacity:1} 152 .lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:2.5rem;cursor:pointer;opacity:.6;transition:opacity .2s;background:rgba(0,0,0,.3);border:none;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center} 153 .lightbox .lb-nav:hover{opacity:1} 154 .lightbox .lb-prev{left:1.5rem} 155 .lightbox .lb-next{right:1.5rem} 156 </style> 157 </head> 158 <body> 159 160 <!-- Nav --> 161 <nav id="navbar"> 162 <div class="nav-inner"> 163 <a href="#" class="nav-brand"> 164 <img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/restai-logo.png" alt="RESTai"> 165 RESTai 166 </a> 167 <div class="nav-links"> 168 <a href="#features">Features</a> 169 <a href="#llms">LLMs</a> 170 <a href="#quickstart">Get Started</a> 171 <a href="https://github.com/apocas/restai" class="nav-cta" target="_blank">GitHub</a> 172 <a href="https://ai.restai.cloud/admin" class="nav-cta" target="_blank">Login</a> 173 </div> 174 </div> 175 </nav> 176 177 <!-- Hero --> 178 <section class="hero"> 179 <div class="hero-glow g1"></div> 180 <div class="hero-glow g2"></div> 181 <img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/restai-logo.png" alt="RESTai" class="hero-logo"> 182 <h1>RESTai</h1> 183 <p class="tagline">AIaaS (AI as a Service) — Create AI projects and consume them via a simple REST API. RAG, Agents, Visual Logic — all in one platform.</p> 184 <div class="hero-btns"> 185 <a href="https://ai.restai.cloud/admin" class="btn btn-primary" target="_blank"> 186 Live Demo 187 </a> 188 <a href="https://github.com/apocas/restai" class="btn btn-outline" target="_blank"> 189 <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg> 190 GitHub 191 </a> 192 </div> 193 <p style="margin-top:1rem;font-size:.85rem;color:rgba(255,255,255,.4);position:relative;z-index:1">Demo login: <code style="background:rgba(255,255,255,.08);padding:2px 6px;border-radius:4px">demo</code> / <code style="background:rgba(255,255,255,.08);padding:2px 6px;border-radius:4px">demodemo</code></p> 194 <div class="hero-screenshot reveal"> 195 <img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/templates.png" alt="RESTai Dashboard"> 196 </div> 197 </section> 198 199 <!-- Screenshot Carousel --> 200 <section class="carousel-section" id="screenshots"> 201 <div class="container" style="text-align:center"> 202 <span class="section-badge reveal">Platform Overview</span> 203 <h2 class="section-title reveal">See it in action</h2> 204 </div> 205 <div class="carousel-wrap"> 206 <div class="carousel-track reveal" id="carouselTrack"> 207 <div class="carousel-slide" onclick="openLightbox(0)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/home.png" alt="Dashboard"><div class="caption">Dashboard & Analytics</div></div> 208 <div class="carousel-slide" onclick="openLightbox(1)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/projects.png" alt="Projects"><div class="caption">Projects</div></div> 209 <div class="carousel-slide" onclick="openLightbox(2)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/templates.png" alt="Templates"><div class="caption">Templates</div></div> 210 <div class="carousel-slide" onclick="openLightbox(3)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/playground.png" alt="Playground"><div class="caption">Chat Playground</div></div> 211 <div class="carousel-slide" onclick="openLightbox(4)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/agent.png" alt="Agent"><div class="caption">Agent + MCP Tools</div></div> 212 <div class="carousel-slide" onclick="openLightbox(5)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/rag.png" alt="RAG"><div class="caption">RAG</div></div> 213 <div class="carousel-slide" onclick="openLightbox(6)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/rag2.png" alt="Knowledge Graph"><div class="caption">Knowledge Graph</div></div> 214 <div class="carousel-slide" onclick="openLightbox(7)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/block.png" alt="Block IDE"><div class="caption">Block IDE</div></div> 215 <div class="carousel-slide" onclick="openLightbox(8)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/analytics.png" alt="Analytics"><div class="caption">Analytics</div></div> 216 <div class="carousel-slide" onclick="openLightbox(9)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/eval.png" alt="Evaluation"><div class="caption">Evaluation</div></div> 217 <div class="carousel-slide" onclick="openLightbox(10)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/prompts.png" alt="Prompt Versioning"><div class="caption">Prompt Versioning</div></div> 218 <div class="carousel-slide" onclick="openLightbox(11)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/classifier.png" alt="Classifier"><div class="caption">Classifier</div></div> 219 <div class="carousel-slide" onclick="openLightbox(12)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/teams.png" alt="Teams"><div class="caption">Teams</div></div> 220 <div class="carousel-slide" onclick="openLightbox(13)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/branding.png" alt="Branding"><div class="caption">Custom Branding</div></div> 221 <div class="carousel-slide" onclick="openLightbox(14)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/llms.png" alt="LLMs"><div class="caption">LLM Management</div></div> 222 <div class="carousel-slide" onclick="openLightbox(15)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/directaccess.png" alt="Direct Access"><div class="caption">Direct Access</div></div> 223 <div class="carousel-slide" onclick="openLightbox(16)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/widget.png" alt="Widget"><div class="caption">Chat Widget</div></div> 224 <div class="carousel-slide" onclick="openLightbox(17)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/settings.png" alt="Settings"><div class="caption">Settings</div></div> 225 <div class="carousel-slide" onclick="openLightbox(18)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/gpus.png" alt="GPUs"><div class="caption">GPU Detection</div></div> 226 <div class="carousel-slide" onclick="openLightbox(19)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/audit.png" alt="Audit"><div class="caption">Audit Log</div></div> 227 <div class="carousel-slide" onclick="openLightbox(20)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/image.png" alt="Image Gen"><div class="caption">Image Generation</div></div> 228 <div class="carousel-slide" onclick="openLightbox(21)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/wordpress1.png" alt="WordPress plugin settings"><div class="caption">WordPress Plugin — Settings</div></div> 229 <div class="carousel-slide" onclick="openLightbox(22)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/wordpress2.png" alt="WordPress plugin editor"><div class="caption">WordPress Plugin — Gutenberg sidebar</div></div> 230 <div class="carousel-slide" onclick="openLightbox(23)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/wordpress3.png" alt="WordPress plugin analytics"><div class="caption">WordPress Plugin — Analytics</div></div> 231 <div class="carousel-slide" onclick="openLightbox(24)"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/wordpress4.png" alt="WordPress plugin front-end"><div class="caption">WordPress Plugin — Live on a site</div></div> 232 </div> 233 <div class="carousel-dots" id="carouselDots"></div> 234 </div> 235 </section> 236 237 <!-- Lightbox --> 238 <div class="lightbox" id="lightbox" onclick="closeLightbox(event)"> 239 <button class="lb-close" onclick="closeLightbox(event)">×</button> 240 <button class="lb-nav lb-prev" onclick="navLightbox(event,-1)">‹</button> 241 <img id="lbImg" src="" alt=""> 242 <button class="lb-nav lb-next" onclick="navLightbox(event,1)">›</button> 243 <div class="lb-caption" id="lbCaption"></div> 244 </div> 245 246 <!-- Why RESTai --> 247 <section id="why"> 248 <div class="container"> 249 <div class="reveal" style="text-align:center;margin-bottom:3rem"> 250 <span class="section-badge">Why RESTai?</span> 251 <h2 class="section-title">Everything you need to deploy AI</h2> 252 <p class="section-sub" style="margin:1rem auto 0">A complete AI platform — not just another wrapper. Full Web UI, analytics, security, and enterprise features out of the box.</p> 253 </div> 254 <div class="why-grid"> 255 <div class="why-card reveal"> 256 <div class="icon" style="background:rgba(99,102,241,.15);color:var(--accent1)">⚙</div> 257 <h3>Multi-Project Platform</h3> 258 <p>RAG with SQL-to-NL and auto-sync, Agents with MCP tools, Block visual logic, and direct Inference — all project types in one platform.</p> 259 </div> 260 <div class="why-card reveal"> 261 <div class="icon" style="background:rgba(6,182,212,.15);color:var(--accent3)">📈</div> 262 <h3>Full Web UI + Analytics</h3> 263 <p>React dashboard with token tracking, cost analytics, latency monitoring, and per-project usage charts. Not just an API.</p> 264 </div> 265 <div class="why-card reveal"> 266 <div class="icon" style="background:rgba(139,92,246,.15);color:var(--accent2)">🤖</div> 267 <h3>Any LLM Provider</h3> 268 <p>OpenAI, Anthropic, Ollama, Gemini, Groq, LiteLLM, vLLM, Azure, and any OpenAI-compatible endpoint.</p> 269 </div> 270 <div class="why-card reveal"> 271 <div class="icon" style="background:rgba(34,197,94,.15);color:#22c55e">🔒</div> 272 <h3>Enterprise Security</h3> 273 <p>Teams, RBAC, OAuth/LDAP/OIDC, TOTP 2FA, input/output guardrails, audit logging, and per-project rate limiting.</p> 274 </div> 275 <div class="why-card reveal"> 276 <div class="icon" style="background:rgba(251,146,60,.15);color:#fb923c">🔌</div> 277 <h3>Extensible Tools (MCP)</h3> 278 <p>Model Context Protocol support for unlimited agent integrations. Connect any MCP server via HTTP/SSE or stdio.</p> 279 </div> 280 <div class="why-card reveal"> 281 <div class="icon" style="background:rgba(236,72,153,.15);color:#ec4899">🎨</div> 282 <h3>White-Label Branding</h3> 283 <p>Custom logos, colors, and app names per team. Built-in knowledge sync from S3, Confluence, SharePoint, and Google Drive.</p> 284 </div> 285 </div> 286 </div> 287 </section> 288 289 <!-- Features --> 290 <section id="features"> 291 <div class="container"> 292 293 <!-- Dashboard --> 294 <div class="feature reveal"> 295 <div class="feature-text"> 296 <span class="section-badge">Analytics</span> 297 <h2>Dashboard & Analytics</h2> 298 <p>Track token usage, costs, latency, and project activity from a centralized dashboard. Daily charts for tokens, costs, and response latency per project — identify performance regressions at a glance.</p> 299 </div> 300 <div class="feature-img"> 301 <img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/home.png" alt="RESTai Dashboard"> 302 </div> 303 </div> 304 305 <!-- RAG --> 306 <div class="feature reverse reveal"> 307 <div class="feature-text"> 308 <span class="section-badge">Knowledge</span> 309 <h2>RAG — Retrieval-Augmented Generation</h2> 310 <p>Upload documents and query them with LLM-powered retrieval. Multiple vector stores, ColBERT and LLM-based reranking, and natural language to SQL.</p> 311 <ul> 312 <li>ChromaDB, PGVector, Weaviate, Pinecone</li> 313 <li>Auto-sync from S3, Confluence, SharePoint, Google Drive</li> 314 <li>Smart chunking analytics with recommendations</li> 315 <li>Built-in evaluation framework with DeepEval</li> 316 </ul> 317 </div> 318 <div class="feature-img-dual"> 319 <div class="feature-img"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/rag.png" alt="RESTai RAG"></div> 320 <div class="feature-img"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/analytics.png" alt="RESTai Analytics"></div> 321 </div> 322 </div> 323 324 <!-- Agents --> 325 <div class="feature reveal"> 326 <div class="feature-text"> 327 <span class="section-badge">Agents</span> 328 <h2>Agents + MCP</h2> 329 <p>Zero-shot ReAct agents with built-in tools and MCP (Model Context Protocol) server support. Connect any MCP-compatible server via HTTP/SSE or stdio for unlimited tool access.</p> 330 </div> 331 <div class="feature-img"> 332 <img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/agent.png" alt="RESTai Agent"> 333 </div> 334 </div> 335 336 <!-- Playground --> 337 <div class="feature reverse reveal"> 338 <div class="feature-text"> 339 <span class="section-badge">Playground</span> 340 <h2>Projects & Chat Playground</h2> 341 <p>Create and manage AI projects with their own LLM, system prompt, tools, and configuration. Test instantly in the built-in chat playground with streaming responses and multimodal support.</p> 342 </div> 343 <div class="feature-img"> 344 <img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/playground.png" alt="RESTai Playground"> 345 </div> 346 </div> 347 348 <!-- Block --> 349 <div class="feature reveal"> 350 <div class="feature-text"> 351 <span class="section-badge">Visual Logic</span> 352 <h2>Block — Visual Logic Builder</h2> 353 <p>Build processing logic visually using a Blockly-based IDE — no LLM required. Drag-and-drop blocks to define how input is transformed into output. Use the "Call Project" block to compose AI pipelines.</p> 354 </div> 355 <div class="feature-img"> 356 <img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/block.png" alt="RESTai Block IDE"> 357 </div> 358 </div> 359 360 <!-- Eval --> 361 <div class="feature reverse reveal"> 362 <div class="feature-text"> 363 <span class="section-badge">Quality</span> 364 <h2>Evaluation Framework</h2> 365 <p>Built-in evaluation system to measure and track AI project quality over time. Create test datasets, run evaluations with multiple metrics, and visualize score trends.</p> 366 <ul> 367 <li>Answer Relevancy — is the answer relevant?</li> 368 <li>Faithfulness — is it grounded in context? (RAG)</li> 369 <li>Correctness — does it match expected output?</li> 370 </ul> 371 </div> 372 <div class="feature-img"> 373 <img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/eval.png" alt="RESTai Evaluation"> 374 </div> 375 </div> 376 377 <!-- Prompts --> 378 <div class="feature reveal"> 379 <div class="feature-text"> 380 <span class="section-badge">Versioning</span> 381 <h2>Prompt Versioning</h2> 382 <p>Every system prompt change is automatically versioned. Browse history, compare versions, and restore any previous prompt. Eval runs link to prompt versions for A/B comparison.</p> 383 </div> 384 <div class="feature-img"> 385 <img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/prompts.png" alt="RESTai Prompt Versioning"> 386 </div> 387 </div> 388 389 <!-- Image Gen --> 390 <div class="feature reverse reveal"> 391 <div class="feature-text"> 392 <span class="section-badge">GPU</span> 393 <h2>Image Generation</h2> 394 <p>Local and remote image generators loaded dynamically. Supports Stable Diffusion, Flux, DALL-E, RMBG2, and more. Auto-detects NVIDIA GPUs with detailed hardware monitoring.</p> 395 </div> 396 <div class="feature-img"> 397 <img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/image.png" alt="RESTai Image Generation"> 398 </div> 399 </div> 400 401 <!-- Teams & Branding --> 402 <div class="feature reveal"> 403 <div class="feature-text"> 404 <span class="section-badge">Enterprise</span> 405 <h2>Teams, Branding & Security</h2> 406 <p>Multi-tenant with teams, RBAC, custom branding per team (white-labeling), TOTP 2FA, input/output guardrails, and a full audit log.</p> 407 <ul> 408 <li>Custom logos, colors, and app names per team</li> 409 <li>OAuth, LDAP, OIDC single sign-on</li> 410 <li>TOTP 2FA with admin enforcement</li> 411 <li>Full audit trail for all mutations</li> 412 </ul> 413 </div> 414 <div class="feature-img-dual"> 415 <div class="feature-img"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/branding.png" alt="RESTai Branding"></div> 416 <div class="feature-img"><img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/audit.png" alt="RESTai Audit"></div> 417 </div> 418 </div> 419 420 <!-- Knowledge Sync --> 421 <div class="feature reverse reveal"> 422 <div class="feature-text"> 423 <span class="section-badge">Auto-Sync</span> 424 <h2>Knowledge Base Sync</h2> 425 <p>Automatically keep your RAG knowledge base up-to-date by syncing from external sources on a schedule. Configure per project with independent settings.</p> 426 <ul> 427 <li>Web URLs — re-scrape pages automatically</li> 428 <li>Amazon S3 — sync documents from buckets</li> 429 <li>Confluence — sync space pages</li> 430 <li>SharePoint — sync via Microsoft Graph</li> 431 <li>Google Drive — sync via service account</li> 432 </ul> 433 </div> 434 <div class="feature-img"> 435 <img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/teams.png" alt="RESTai Teams"> 436 </div> 437 </div> 438 439 <!-- Chat Widget --> 440 <div class="feature reverse reveal"> 441 <div class="feature-text"> 442 <span class="section-badge">Embed</span> 443 <h2>Embeddable Chat Widget</h2> 444 <p>Add an AI chat bubble to any website with a single <code><script></code> tag. Streams responses in real-time, maintains conversation context, and works on any domain.</p> 445 <ul> 446 <li>Fully customizable — colors, title, avatar, position, welcome message</li> 447 <li>Shadow DOM isolation — won't conflict with host page styles</li> 448 <li>Live preview in the admin UI before deploying</li> 449 <li>Secured via read-only, project-scoped API key</li> 450 </ul> 451 </div> 452 <div class="feature-img"> 453 <img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/widget.png" alt="RESTai Chat Widget"> 454 </div> 455 </div> 456 457 <!-- WordPress Plugin --> 458 <div class="feature reveal"> 459 <div class="feature-text"> 460 <span class="section-badge">WordPress</span> 461 <h2>WordPress Plugin</h2> 462 <p>Drop a single zip into any WordPress site and turn your RESTai instance into the AI engine behind it. Each capability maps to its own RESTai project, so models, prompts and budgets stay tunable per task — and the plugin auto-provisions the starter projects on first connect.</p> 463 <ul> 464 <li><strong>Generate content, excerpts and SEO meta</strong> from Gutenberg — writes into Yoast and Rank Math fields</li> 465 <li><strong>One-click featured image</strong> generation using whichever generator your team has access to</li> 466 <li><strong>Translate any post</strong> to N languages as drafts — Polylang/WPML compatible</li> 467 <li><strong>AI comment moderation</strong>, <strong>WooCommerce</strong> product descriptions, <strong>knowledge sync</strong>, <strong>AI site search</strong> and <strong>email personalisation</strong></li> 468 <li><strong>Embeddable chat widget</strong> with the right widget key auto-provisioned, no copy-paste required</li> 469 </ul> 470 </div> 471 <div class="feature-img"> 472 <img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/wordpress2.png" alt="RESTai WordPress plugin in the Gutenberg editor"> 473 </div> 474 </div> 475 476 <!-- Direct Access --> 477 <div class="feature reveal"> 478 <div class="feature-text"> 479 <span class="section-badge">OpenAI-Compatible</span> 480 <h2>Direct Access API</h2> 481 <p>Use LLMs, image generators, and audio transcription directly via OpenAI-compatible endpoints — no project required. Team-level permissions control access, and all usage counts toward budgets.</p> 482 <ul> 483 <li><code>POST /v1/chat/completions</code> — Chat with any LLM (streaming supported)</li> 484 <li><code>POST /v1/images/generations</code> — Generate images via DALL-E, Flux, SD, etc.</li> 485 <li><code>POST /v1/audio/transcriptions</code> — Transcribe audio files</li> 486 </ul> 487 <p style="margin-top:1rem;color:var(--text2);font-size:.9rem">Works with any OpenAI-compatible SDK — just point <code>base_url</code> to your RESTai instance.</p> 488 </div> 489 <div class="feature-img"> 490 <img src="https://raw.githubusercontent.com/apocas/restai/master/readme/assets/directaccess.png" alt="RESTai Direct Access"> 491 </div> 492 </div> 493 494 </div> 495 </section> 496 497 <!-- LLMs --> 498 <section id="llms" style="background:var(--bg2)"> 499 <div class="container" style="text-align:center"> 500 <span class="section-badge reveal">Providers</span> 501 <h2 class="section-title reveal">Any LLM Provider</h2> 502 <p class="section-sub reveal" style="margin:1rem auto 3rem">Talks directly to provider SDKs. Configurable context windows with automatic chat memory management.</p> 503 <div class="llm-grid reveal"> 504 <div class="llm-card"><div class="name">Ollama</div></div> 505 <div class="llm-card"><div class="name">OpenAI</div></div> 506 <div class="llm-card"><div class="name">Anthropic</div></div> 507 <div class="llm-card"><div class="name">Google Gemini</div></div> 508 <div class="llm-card"><div class="name">Groq</div></div> 509 <div class="llm-card"><div class="name">Grok (xAI)</div></div> 510 <div class="llm-card"><div class="name">LiteLLM</div></div> 511 <div class="llm-card"><div class="name">vLLM</div></div> 512 <div class="llm-card"><div class="name">Azure OpenAI</div></div> 513 <div class="llm-card"><div class="name">AWS Bedrock</div></div> 514 <div class="llm-card"><div class="name">OpenAI-Compatible</div></div> 515 </div> 516 </div> 517 </section> 518 519 <!-- Quick Start --> 520 <section id="quickstart"> 521 <div class="container" style="text-align:center"> 522 <span class="section-badge reveal">Quick Start</span> 523 <h2 class="section-title reveal">Up and running in 30 seconds</h2> 524 525 <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:1.5rem;text-align:left;margin-bottom:2rem" class="reveal"> 526 <div class="quickstart"> 527 <div style="font-weight:600;margin-bottom:.8rem;color:var(--accent3);font-size:.9rem">Install from PyPI</div> 528 <pre><span class="comment"># Install</span> 529 pip install restai-core 530 531 <span class="comment"># Setup database</span> 532 restai init 533 restai migrate 534 535 <span class="comment"># Start server</span> 536 restai serve 537 538 <span class="comment"># Open http://localhost:9000/admin</span> 539 <span class="comment"># Login: admin / admin</span></pre> 540 </div> 541 542 <div class="quickstart"> 543 <div style="font-weight:600;margin-bottom:.8rem;color:var(--accent3);font-size:.9rem">From Source</div> 544 <pre><span class="comment"># Clone and install</span> 545 git clone https://github.com/apocas/restai 546 cd restai && make install 547 548 <span class="comment"># Open http://localhost:9000/admin</span> 549 <span class="comment"># Login: admin / admin</span></pre> 550 </div> 551 </div> 552 553 <p class="reveal" style="color:var(--text2)"> 554 With env file: <code style="background:var(--bg2);padding:.3rem .6rem;border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:.85rem">restai serve -e .env -p 8080 -w 4</code> 555 · 556 Docker: <code style="background:var(--bg2);padding:.3rem .6rem;border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:.85rem">docker compose --env-file .env up --build</code> 557 </p> 558 559 <div class="reveal" style="margin-top:2rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap"> 560 <a href="https://pypi.org/project/restai-core/" class="btn btn-primary" target="_blank"> 561 PyPI Package 562 </a> 563 <a href="https://github.com/apocas/restai" class="btn btn-outline" target="_blank"> 564 <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg> 565 View on GitHub 566 </a> 567 </div> 568 </div> 569 </section> 570 571 <!-- Footer --> 572 <footer> 573 <p>RESTai is open-source under the <a href="https://github.com/apocas/restai/blob/master/LICENSE" target="_blank">Apache 2.0 License</a></p> 574 <div class="footer-badges"> 575 <a href="https://pypi.org/project/restai-core/" target="_blank"><img src="https://img.shields.io/pypi/v/restai-core?color=blue&label=PyPI" alt="PyPI"></a> 576 <img src="https://img.shields.io/badge/python-3.11+-blue.svg" alt="Python"> 577 <img src="https://img.shields.io/badge/license-Apache%202.0-green.svg" alt="License"> 578 <img src="https://img.shields.io/badge/docker-ready-2496ED?logo=docker&logoColor=white" alt="Docker"> 579 <img src="https://img.shields.io/badge/kubernetes-ready-326CE5?logo=kubernetes&logoColor=white" alt="K8s"> 580 </div> 581 <p style="margin-top:1rem;font-size:.75rem"><a href="https://ai.restai.cloud/privacy" target="_blank" style="color:rgba(255,255,255,.3)">Privacy Policy</a></p> 582 </footer> 583 584 <script> 585 // Sticky nav shadow 586 const nav = document.getElementById('navbar'); 587 window.addEventListener('scroll', () => { 588 nav.classList.toggle('scrolled', window.scrollY > 10); 589 }); 590 591 // Scroll reveal 592 const observer = new IntersectionObserver((entries) => { 593 entries.forEach(entry => { 594 if (entry.isIntersecting) { 595 entry.target.classList.add('visible'); 596 } 597 }); 598 }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }); 599 600 document.querySelectorAll('.reveal').forEach(el => observer.observe(el)); 601 602 // Screenshot carousel 603 (function() { 604 const track = document.getElementById('carouselTrack'); 605 const dotsContainer = document.getElementById('carouselDots'); 606 const slides = track.querySelectorAll('.carousel-slide'); 607 const totalSlides = slides.length; 608 const w = track.offsetWidth; 609 const visibleCount = w < 560 ? 1 : w < 900 ? 2 : 3; 610 const dotCount = Math.ceil(totalSlides / visibleCount); 611 let currentDot = 0; 612 let autoTimer; 613 614 // Build dots 615 for (let i = 0; i < dotCount; i++) { 616 const btn = document.createElement('button'); 617 if (i === 0) btn.classList.add('active'); 618 btn.addEventListener('click', () => scrollToDot(i)); 619 dotsContainer.appendChild(btn); 620 } 621 622 function scrollToDot(idx) { 623 currentDot = idx; 624 const target = slides[idx * visibleCount]; 625 if (target) track.scrollTo({ left: target.offsetLeft - track.offsetLeft, behavior: 'smooth' }); 626 updateDots(); 627 } 628 629 function updateDots() { 630 dotsContainer.querySelectorAll('button').forEach((b, i) => 631 b.classList.toggle('active', i === currentDot) 632 ); 633 } 634 635 function autoScroll() { 636 currentDot = (currentDot + 1) % dotCount; 637 scrollToDot(currentDot); 638 } 639 640 function startAuto() { autoTimer = setInterval(autoScroll, 4000); } 641 function stopAuto() { clearInterval(autoTimer); } 642 643 startAuto(); 644 track.addEventListener('mouseenter', stopAuto); 645 track.addEventListener('mouseleave', startAuto); 646 track.addEventListener('touchstart', stopAuto, { passive: true }); 647 track.addEventListener('touchend', () => { setTimeout(startAuto, 3000); }); 648 })(); 649 650 // Lightbox 651 const lbSlides = document.querySelectorAll('#carouselTrack .carousel-slide'); 652 const lbData = Array.from(lbSlides).map(s => ({ 653 src: s.querySelector('img').src, 654 caption: s.querySelector('.caption').textContent 655 })); 656 let lbIndex = 0; 657 658 function openLightbox(idx) { 659 lbIndex = idx; 660 const lb = document.getElementById('lightbox'); 661 document.getElementById('lbImg').src = lbData[idx].src; 662 document.getElementById('lbCaption').textContent = lbData[idx].caption; 663 lb.classList.add('open'); 664 document.body.style.overflow = 'hidden'; 665 } 666 667 function closeLightbox(e) { 668 if (e.target.classList.contains('lb-nav') || e.target.classList.contains('lb-prev') || e.target.classList.contains('lb-next')) return; 669 document.getElementById('lightbox').classList.remove('open'); 670 document.body.style.overflow = ''; 671 } 672 673 function navLightbox(e, dir) { 674 e.stopPropagation(); 675 lbIndex = (lbIndex + dir + lbData.length) % lbData.length; 676 document.getElementById('lbImg').src = lbData[lbIndex].src; 677 document.getElementById('lbCaption').textContent = lbData[lbIndex].caption; 678 } 679 680 document.addEventListener('keydown', (e) => { 681 const lb = document.getElementById('lightbox'); 682 if (!lb.classList.contains('open')) return; 683 if (e.key === 'Escape') { lb.classList.remove('open'); document.body.style.overflow = ''; } 684 if (e.key === 'ArrowLeft') navLightbox(e, -1); 685 if (e.key === 'ArrowRight') navLightbox(e, 1); 686 }); 687 688 // Make all feature / hero screenshots clickable → lightbox 689 document.querySelectorAll('.feature-img img, .hero-screenshot img').forEach(img => { 690 img.addEventListener('click', () => { 691 const src = img.src; 692 const caption = img.alt || ''; 693 // Find this image in the carousel lbData for prev/next, or show standalone 694 const idx = lbData.findIndex(d => src.includes(d.src.split('/').pop())); 695 if (idx >= 0) { 696 openLightbox(idx); 697 } else { 698 // Standalone — no prev/next 699 document.getElementById('lbImg').src = src; 700 document.getElementById('lbCaption').textContent = caption; 701 document.getElementById('lightbox').classList.add('open'); 702 document.body.style.overflow = 'hidden'; 703 } 704 }); 705 }); 706 </script> 707 <script 708 src="https://ai.restai.cloud/widget/chat.js" 709 data-widget-key="wk_67f983a102e544b6a4ba4fa0e5a684b3MRcHlcVG-dDjnCIXq2qkR5FS8E4AFMlew1xpSmPsxRk" 710 data-server="https://ai.restai.cloud" 711 ></script> 712 </body> 713 </html>