aipackage/cezen-portal/quickstart.html
2026-06-30 10:51:41 +05:30

565 lines
25 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quick Start — Nexus One AI Portal</title>
<link rel="stylesheet" href="style.css?v=4">
</head>
<body>
<header class="topnav">
<a href="index.html" class="brand">Nexus One <span>AI</span></a>
<nav>
<a href="index.html">Home</a>
<a href="quickstart.html" class="active">Quick Start</a>
<a href="prompts.html">Prompt Library</a>
<a href="usecases.html">Use Cases</a>
<span class="nav-sep"></span>
<div class="nav-dropdown">
<button class="nav-drop-btn">Help ▾</button>
<div class="nav-drop-menu">
<span class="nav-drop-cat">LEARN /</span>
<a href="quickstart.html">Quick Start</a>
<a href="models.html">Models</a>
<span class="nav-drop-cat">SUPPORT /</span>
<a href="troubleshooting.html">Troubleshoot</a>
<a href="faq.html">FAQ</a>
<span class="nav-drop-cat">MORE /</span>
<a href="glossary.html">Glossary</a>
<a href="whats-new.html">What's New</a>
</div>
</div>
<div class="nav-dropdown">
<button class="nav-drop-btn">Admin ▾</button>
<div class="nav-drop-menu nav-drop-menu-wide">
<span class="nav-drop-cat">DOCS /</span>
<a href="security.html">Security & Privacy</a>
<a href="admin.html">Admin Guide</a>
<span class="nav-drop-cat">MONITOR /</span>
<a href="dashboard.html">Dashboard</a>
<a href="analytics.html">Usage Analytics</a>
<a href="audit.html">Audit Log</a>
<a href="feedback.html">Feedback &amp; Ratings</a>
<span class="nav-drop-cat">MANAGE /</span>
<a href="users.html">Users</a>
<a href="teams.html">Teams</a>
<a href="models-admin.html">Model Manager</a>
<a href="training.html">Training</a>
<a href="knowledge.html">Knowledge Base</a>
<span class="nav-drop-cat">TOOLS /</span>
<a href="apikeys.html">API Keys</a>
<a href="benchmark.html">Benchmarking</a>
<a href="model-compare.html">Model Compare</a>
<a href="api-playground.html">API Playground</a>
<a href="guardrails.html">Guardrails</a>
<a href="rag-quality.html">RAG Quality</a>
<a href="router.html">Model Router</a>
<a href="connectors.html">Connectors</a>
<span class="nav-drop-cat">SYSTEM /</span>
<a href="console.html">Console</a>
<a href="settings.html">Settings</a>
</div>
</div>
<div class="nav-dropdown">
<button class="nav-drop-btn">AI Tools ▾</button>
<div class="nav-drop-menu">
<span class="nav-drop-cat">INTELLIGENCE /</span>
<a href="documents.html">Document Intelligence</a>
<a href="chat-multi.html">Multimodal Chat</a>
<a href="prompt-studio.html">Prompt Studio</a>
<a href="meeting.html">Meeting Assistant</a>
<span class="nav-drop-cat">AUTOMATION /</span>
<a href="agents.html">Agent Builder</a>
<a href="schedules.html">Scheduled Jobs</a>
<a href="workflows.html">Workflow Automation</a>
<span class="nav-drop-cat">QUALITY /</span>
<a href="evals.html">AI Eval Suite</a>
<a href="chatrooms.html">Chat Rooms</a>
</div>
</div>
</nav>
<a href="notifications.html" style="position:relative">🔔</a>
<span class="badge" data-brand="tier">Basic Tier</span>
<div id="nav-org-logo" class="nav-org-logo"></div>
</header>
<div class="page-hero">
<div class="label">Quick Start</div>
<h1>Up and Running in 5 Minutes</h1>
<p>Follow these steps in order. By the end you'll have had your first AI conversation — then explore the full platform at your own pace.</p>
</div>
<div class="content">
<!-- TAB SWITCHER -->
<div style="display:flex;gap:8px;margin-bottom:32px;border-bottom:2px solid var(--bdr);padding-bottom:0">
<button class="qs-tab active" onclick="showTab('basics',this)">First Steps</button>
<button class="qs-tab" onclick="showTab('features',this)">Platform Features</button>
<button class="qs-tab" onclick="showTab('admin',this)">Admin Setup</button>
</div>
<!-- ── FIRST STEPS ── -->
<div id="tab-basics" class="qs-tab-panel">
<div class="qs-track">
<div class="qs-step" id="step1">
<div class="qs-step-header">
<div class="qs-num">1</div>
<div>
<h2>Open the chat interface</h2>
<p class="qs-sub">Open WebUI is your main access point — it works in any browser.</p>
</div>
<a href="http://ai.local:3001" target="_blank" class="btn-primary" style="margin-left:auto;white-space:nowrap">Open WebUI ↗</a>
</div>
<div class="qs-body">
<div class="qs-tip">
Go to <code>http://ai.local:3001</code> in Chrome, Firefox, Edge, or Safari. No installation required — it runs entirely in the browser.
</div>
<div class="notice">💡 If <code>ai.local</code> doesn't resolve, ask your administrator for the server IP and use <code>http://[IP]:3001</code> instead.</div>
</div>
</div>
<div class="qs-connector"></div>
<div class="qs-step" id="step2">
<div class="qs-step-header">
<div class="qs-num">2</div>
<div>
<h2>Sign in</h2>
<p class="qs-sub">Use the credentials your administrator set up for you.</p>
</div>
</div>
<div class="qs-body">
<div class="info-grid" style="margin-top:0">
<div class="info-card">
<h4>First person to sign up</h4>
<p>The first account created becomes the admin automatically. Add other users from <strong>Admin Panel → Users</strong> after signing in.</p>
</div>
<div class="info-card">
<h4>Everyone else</h4>
<p>Ask your admin to create an account, or enable open registration from <strong>Admin Panel → Settings → General</strong>.</p>
</div>
</div>
</div>
</div>
<div class="qs-connector"></div>
<div class="qs-step" id="step3">
<div class="qs-step-header">
<div class="qs-num">3</div>
<div>
<h2>Choose a model</h2>
<p class="qs-sub">Pick which AI to talk to. Start with Llama 3.1 8B for most tasks.</p>
</div>
<a href="models.html" class="btn-secondary" style="margin-left:auto;white-space:nowrap">View all models →</a>
</div>
<div class="qs-body">
<div class="model-quick-grid">
<div class="mq-card recommended">
<div class="mq-badge">Recommended</div>
<div class="mq-name">llama3.1:8b</div>
<div class="mq-desc">Fast, general purpose. Good for Q&A, writing, summarising. Start here.</div>
</div>
<div class="mq-card">
<div class="mq-name">mistral:7b</div>
<div class="mq-desc">Strong at reasoning and structured tasks. Good alternative.</div>
</div>
<div class="mq-card">
<div class="mq-name">llama3.2:3b</div>
<div class="mq-desc">Very fast and lightweight. Use when speed matters more than depth.</div>
</div>
</div>
</div>
</div>
<div class="qs-connector"></div>
<div class="qs-step" id="step4">
<div class="qs-step-header">
<div class="qs-num">4</div>
<div>
<h2>Have your first conversation</h2>
<p class="qs-sub">Type a question or request and press Enter. Everything stays on your server.</p>
</div>
</div>
<div class="qs-body">
<div class="prompt-examples">
<div class="pe-label">Try these to start:</div>
<div class="pe-grid">
<button class="pe-chip" onclick="copyPrompt(this, 'Summarise the key responsibilities of a municipal water utility in 5 bullet points.')">Summarise utility responsibilities</button>
<button class="pe-chip" onclick="copyPrompt(this, 'Write a professional email declining a vendor proposal politely.')">Draft a decline email</button>
<button class="pe-chip" onclick="copyPrompt(this, 'What are the most common causes of transformer failures in power distribution networks?')">Technical question</button>
<button class="pe-chip" onclick="copyPrompt(this, 'Explain what RAG (Retrieval Augmented Generation) means in simple terms.')">Explain RAG simply</button>
</div>
<div class="pe-hint">Click any prompt to copy it, then paste into Open WebUI.</div>
</div>
</div>
</div>
<div class="qs-connector"></div>
<div class="qs-step" id="step5">
<div class="qs-step-header">
<div class="qs-num">5</div>
<div>
<h2>Upload a document and ask about it</h2>
<p class="qs-sub">This is where Nexus One AI becomes genuinely useful — your documents, your questions.</p>
</div>
</div>
<div class="qs-body">
<div class="qs-tip">
In Open WebUI, click the <strong>+</strong> icon next to the message box, upload a PDF or Word doc, then ask questions about its contents.
</div>
<div class="info-grid" style="margin-top:16px">
<div class="info-card">
<h4>Supported file types</h4>
<p>PDF, DOCX, TXT, MD, CSV, XLSX. Start with files under 10 MB. PDFs must be text-based (not scanned images).</p>
</div>
<div class="info-card">
<h4>Questions to try</h4>
<p>"Summarise this in 3 paragraphs."<br>"What does section 4 say about liability?"<br>"List all deadlines mentioned."<br>"Extract all the monetary values."</p>
</div>
</div>
</div>
</div>
<div class="qs-connector"></div>
<div class="qs-step qs-done" id="step6">
<div class="qs-step-header">
<div class="qs-num done"></div>
<div>
<h2>You're set up. Explore what else is available.</h2>
<p class="qs-sub">Switch to the <strong>Platform Features</strong> tab above to see everything Nexus One AI can do.</p>
</div>
</div>
<div class="qs-body">
<div class="next-cards">
<a href="chat-multi.html" class="next-card">
<div class="next-icon">🖼️</div>
<div>
<h4>Multimodal Chat</h4>
<p>Upload images, switch models mid-conversation, and access persistent chat history with search.</p>
</div>
</a>
<a href="documents.html" class="next-card">
<div class="next-icon">📄</div>
<div>
<h4>Document Intelligence</h4>
<p>Extract tables, compare documents side-by-side, and run batch processing across file sets.</p>
</div>
</a>
<a href="agents.html" class="next-card">
<div class="next-icon">🤖</div>
<div>
<h4>Build an AI Agent</h4>
<p>Create autonomous agents that run multi-step tasks, call tools, and act on your behalf.</p>
</div>
</a>
<a href="troubleshooting.html" class="next-card">
<div class="next-icon">🔧</div>
<div>
<h4>Something not working?</h4>
<p>Check the troubleshooting guide for common issues and fixes.</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- ── PLATFORM FEATURES ── -->
<div id="tab-features" class="qs-tab-panel" style="display:none">
<div class="section-title" style="margin-top:0">Intelligence</div>
<div class="info-grid" style="grid-template-columns:repeat(auto-fill,minmax(280px,1fr))">
<div class="info-card">
<h4>🖼️ <a href="chat-multi.html">Multimodal Chat</a>
<a href="prompt-studio.html">Prompt Studio</a></h4>
<p>Full-featured chat with persistent history, image upload, model switching per conversation, and markdown rendering. Search across all past conversations from the sidebar.</p>
<p style="margin-top:8px;font-size:12px;color:var(--med)">Go to: AI Tools → Multimodal Chat</p>
</div>
<div class="info-card">
<h4>📄 <a href="documents.html">Document Intelligence</a></h4>
<p>Upload PDFs and documents for extraction, comparison, and Q&A. Supports table extraction, batch processing, side-by-side document comparison, and structure parsing.</p>
<p style="margin-top:8px;font-size:12px;color:var(--med)">Go to: AI Tools → Document Intelligence</p>
</div>
<div class="info-card">
<h4>🎙️ <a href="meeting.html">Meeting Assistant</a></h4>
<p>Record or upload meeting audio and get automatic transcription, AI-generated summaries, action item extraction, and follow-up email drafts — all on-premises.</p>
<p style="margin-top:8px;font-size:12px;color:var(--med)">Go to: AI Tools → Meeting Assistant</p>
</div>
<div class="info-card">
<h4>💬 <a href="chatrooms.html">Secure Chat Rooms</a></h4>
<p>AI-assisted group conversations for your team. Create topic-specific rooms where members can collaborate with an AI moderator. Fully private, no cloud relay.</p>
<p style="margin-top:8px;font-size:12px;color:var(--med)">Go to: AI Tools → Chat Rooms</p>
</div>
</div>
<div class="section-title">Automation</div>
<div class="info-grid" style="grid-template-columns:repeat(auto-fill,minmax(280px,1fr))">
<div class="info-card">
<h4>🤖 <a href="agents.html">Agent Builder</a></h4>
<p>Build autonomous AI agents that execute multi-step tasks, call external tools, read files, and act on instructions without human input for every step. Includes governance and approval workflows.</p>
<p style="margin-top:8px;font-size:12px;color:var(--med)">Go to: AI Tools → Agent Builder</p>
</div>
<div class="info-card">
<h4>🔄 <a href="workflows.html">Workflow Automation</a></h4>
<p>Chain AI tasks together in visual pipelines. Trigger on schedule, webhook, or event. Connect input sources, AI processing steps, and output destinations into repeatable flows.</p>
<p style="margin-top:8px;font-size:12px;color:var(--med)">Go to: AI Tools → Workflow Automation</p>
</div>
<div class="info-card">
<h4><a href="schedules.html">Scheduled Jobs</a></h4>
<p>Set AI tasks to run automatically on a cron schedule — daily reports, nightly document processing, weekly summaries. Jobs run on the server even when no one is logged in.</p>
<p style="margin-top:8px;font-size:12px;color:var(--med)">Go to: AI Tools → Scheduled Jobs</p>
</div>
<div class="info-card">
<h4>🔌 <a href="connectors.html">Connectors</a></h4>
<p>Connect Nexus One AI to your existing systems — databases, file shares, APIs, email, and enterprise tools. Connectors let agents and workflows pull live data from your environment.</p>
<p style="margin-top:8px;font-size:12px;color:var(--med)">Admin → Tools → Connectors</p>
</div>
</div>
<div class="section-title">Knowledge & RAG</div>
<div class="info-grid" style="grid-template-columns:repeat(auto-fill,minmax(280px,1fr))">
<div class="info-card">
<h4>📚 <a href="knowledge.html">Knowledge Base</a></h4>
<p>Upload and organise documents into collections. The AI searches these at query time using RAG — so responses are grounded in your actual content rather than model training data.</p>
<p style="margin-top:8px;font-size:12px;color:var(--med)">Admin → Manage → Knowledge Base</p>
</div>
<div class="info-card">
<h4>📊 <a href="rag-quality.html">RAG Quality Dashboard</a></h4>
<p>Monitor retrieval accuracy, chunk quality scores, and query-document relevance. Identify which collections return good results and which need reindexing or tuning.</p>
<p style="margin-top:8px;font-size:12px;color:var(--med)">Admin → Tools → RAG Quality</p>
</div>
<div class="info-card">
<h4>🧪 <a href="evals.html">AI Eval Suite</a></h4>
<p>Run standardised test suites against your models and prompts. Compare output quality, track regressions, and validate that fine-tuned models perform better than their base versions.</p>
<p style="margin-top:8px;font-size:12px;color:var(--med)">Go to: AI Tools → AI Eval Suite</p>
</div>
<div class="info-card">
<h4><a href="benchmark.html">Model Benchmarking</a></h4>
<p>Run speed and quality benchmarks across installed models. Compare tokens/second, TTFT (time-to-first-token), and task-specific accuracy to choose the right model for each use case.</p>
<p style="margin-top:8px;font-size:12px;color:var(--med)">Admin → Tools → Benchmarking</p>
</div>
</div>
<div class="section-title">Control & Safety</div>
<div class="info-grid" style="grid-template-columns:repeat(auto-fill,minmax(280px,1fr))">
<div class="info-card">
<h4>🛡️ <a href="guardrails.html">Guardrails</a></h4>
<p>Define content filters, keyword blocks, PII redaction rules, and prompt injection detection. All queries pass through guardrails before reaching the model and after the response is generated.</p>
<p style="margin-top:8px;font-size:12px;color:var(--med)">Admin → Tools → Guardrails</p>
</div>
<div class="info-card">
<h4>🔀 <a href="router.html">Model Router</a></h4>
<p>Automatically route queries to the most appropriate model based on task type, complexity, or cost. Send code questions to CodeLlama, simple tasks to the fast 3B model, complex reasoning to 70B.</p>
<p style="margin-top:8px;font-size:12px;color:var(--med)">Admin → Tools → Model Router</p>
</div>
<div class="info-card">
<h4>🔑 <a href="apikeys.html">API Keys</a></h4>
<p>Generate and manage API keys for programmatic access to Nexus One AI from your own applications. Set per-key rate limits, allowed models, and expiry dates.</p>
<p style="margin-top:8px;font-size:12px;color:var(--med)">Admin → Tools → API Keys</p>
</div>
<div class="info-card">
<h4>🎓 <a href="training.html">Model Training</a></h4>
<p>Fine-tune models on your own data using QLoRA — efficient training that fits on your existing GPU. Upload a dataset, configure training parameters, and produce a domain-adapted model.</p>
<p style="margin-top:8px;font-size:12px;color:var(--med)">Admin → Manage → Training</p>
</div>
</div>
</div>
<!-- ── ADMIN SETUP ── -->
<div id="tab-admin" class="qs-tab-panel" style="display:none">
<div class="notice" style="margin-bottom:24px">
⚙️ This section is for system administrators. Regular users can skip to <strong>First Steps</strong>.
</div>
<div class="qs-track">
<div class="qs-step">
<div class="qs-step-header">
<div class="qs-num">1</div>
<div>
<h2>Verify all services are running</h2>
<p class="qs-sub">Check the dashboard for green status on all core services.</p>
</div>
<a href="dashboard.html" class="btn-secondary" style="margin-left:auto;white-space:nowrap">Dashboard →</a>
</div>
<div class="qs-body">
<div class="qs-tip">Open the Dashboard and confirm Ollama, Open WebUI, ChromaDB, and the Cezen backend all show as running. If any are red, check the <a href="troubleshooting.html">troubleshooting guide</a>.</div>
</div>
</div>
<div class="qs-connector"></div>
<div class="qs-step">
<div class="qs-step-header">
<div class="qs-num">2</div>
<div>
<h2>Create user accounts</h2>
<p class="qs-sub">Add accounts for each team member before they try to log in.</p>
</div>
<a href="users.html" class="btn-secondary" style="margin-left:auto;white-space:nowrap">Users →</a>
</div>
<div class="qs-body">
<div class="qs-tip">Go to <strong>Admin → Users</strong> to create accounts. Assign roles: Admin for IT staff, User for everyone else. You can also enable open registration if your network is sufficiently restricted.</div>
</div>
</div>
<div class="qs-connector"></div>
<div class="qs-step">
<div class="qs-step-header">
<div class="qs-num">3</div>
<div>
<h2>Load AI models</h2>
<p class="qs-sub">Ensure the recommended models are installed and available.</p>
</div>
<a href="models-admin.html" class="btn-secondary" style="margin-left:auto;white-space:nowrap">Model Manager →</a>
</div>
<div class="qs-body">
<div class="qs-tip">Go to <strong>Admin → Model Manager</strong> to see installed models. The recommended starter set: <code>llama3.1:8b</code>, <code>mistral:7b</code>, <code>nomic-embed-text</code> (required for RAG). Pull additional models as needed.</div>
</div>
</div>
<div class="qs-connector"></div>
<div class="qs-step">
<div class="qs-step-header">
<div class="qs-num">4</div>
<div>
<h2>Set up guardrails</h2>
<p class="qs-sub">Configure content filters appropriate for your organisation before users start.</p>
</div>
<a href="guardrails.html" class="btn-secondary" style="margin-left:auto;white-space:nowrap">Guardrails →</a>
</div>
<div class="qs-body">
<div class="qs-tip">At minimum, enable PII redaction and keyword blocks for sensitive terms. Guardrails can be adjusted at any time — start conservative and loosen rules as you understand your team's usage patterns.</div>
</div>
</div>
<div class="qs-connector"></div>
<div class="qs-step">
<div class="qs-step-header">
<div class="qs-num">5</div>
<div>
<h2>Seed the Knowledge Base</h2>
<p class="qs-sub">Upload your organisation's core documents so users can query them immediately.</p>
</div>
<a href="knowledge.html" class="btn-secondary" style="margin-left:auto;white-space:nowrap">Knowledge Base →</a>
</div>
<div class="qs-body">
<div class="qs-tip">Create collections by department (HR Policies, Finance SOPs, Legal Contracts). Upload the documents and let ChromaDB index them. Users can then query these collections from any AI tool. Check <a href="rag-quality.html">RAG Quality</a> after indexing to confirm retrieval accuracy.</div>
</div>
</div>
<div class="qs-connector"></div>
<div class="qs-step qs-done">
<div class="qs-step-header">
<div class="qs-num done"></div>
<div>
<h2>System ready for your team</h2>
<p class="qs-sub">Share the portal link and the <strong>First Steps</strong> tab with your users.</p>
</div>
</div>
<div class="qs-body">
<div class="next-cards">
<a href="analytics.html" class="next-card">
<div class="next-icon">📊</div>
<div><h4>Usage Analytics</h4><p>Monitor who's using what, query volumes, and model performance across your team.</p></div>
</a>
<a href="audit.html" class="next-card">
<div class="next-icon">📋</div>
<div><h4>Audit Log</h4><p>Full record of all queries, file uploads, and admin actions for compliance.</p></div>
</a>
<a href="router.html" class="next-card">
<div class="next-icon">🔀</div>
<div><h4>Model Router</h4><p>Set routing rules so the right model is used automatically for each task type.</p></div>
</a>
<a href="connectors.html" class="next-card">
<div class="next-icon">🔌</div>
<div><h4>Connectors</h4><p>Connect to your existing systems so agents and workflows can access live data.</p></div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>Nexus One AI &nbsp;·&nbsp; Powered by Cezen &nbsp;·&nbsp; Basic Tier</p>
<p>Questions? <a href="mailto:support@cezentech.com">support@cezentech.com</a> &nbsp;·&nbsp; <a href="https://cezentech.com" target="_blank">cezentech.com</a></p>
</footer>
<style>
.qs-tab {
background: none;
border: none;
padding: 10px 20px;
font-size: 14px;
font-weight: 600;
color: var(--med);
cursor: pointer;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
transition: color .15s, border-color .15s;
}
.qs-tab:hover { color: var(--ink); }
.qs-tab.active { color: var(--purple); border-bottom-color: var(--purple); }
.qs-tab-panel { animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
</style>
<script>
function showTab(name, btn) {
document.querySelectorAll('.qs-tab-panel').forEach(p => p.style.display = 'none');
document.querySelectorAll('.qs-tab').forEach(b => b.classList.remove('active'));
document.getElementById('tab-' + name).style.display = '';
btn.classList.add('active');
}
function copyPrompt(btn, text) {
navigator.clipboard.writeText(text).then(() => {
const orig = btn.textContent;
btn.textContent = '✓ Copied!';
btn.classList.add('copied');
setTimeout(() => { btn.textContent = orig; btn.classList.remove('copied'); }, 2000);
});
}
</script>
<script src="auth.js"></script>
<script src="branding.js"></script>
</body>
</html>