init

2025-09-17 10:54:43 +00:00 · 2025-09-17 10:54:43 +00:00 · f86097a00a
commit f86097a00a
7 changed files with 590 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,2 @@
+vendor/
+composer.lock
--- a/backend.php
+++ b/backend.php
@ -0,0 +1,235 @@
+<?php
+// Backend expects a function llm(string $prompt, ?string $sys): string (to be implemented by you)
+
+declare(strict_types=1);
+
+// --- Harden session cookies before session_start() ---
+$secureCookies = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off');
+session_set_cookie_params([
+    'lifetime' => 0,
+    'path'     => '/',
+    'domain'   => '',
+    'secure'   => $secureCookies,
+    'httponly' => true,
+    'samesite' => 'Lax',
+]);
+
+session_start();
+
+// ------------------------------
+// Vendor autoload (Markdown + Sanitizer)
+// ------------------------------
+require_once __DIR__ . '/vendor/autoload.php';
+
+// Lightweight JSON responder
+function json_out(array $data, int $code = 200): void {
+    http_response_code($code);
+    header('Content-Type: application/json; charset=utf-8');
+    header('X-Content-Type-Options: nosniff');
+    echo json_encode($data, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
+    exit;
+}
+
+// CSRF token helpers
+function csrf_token(): string {
+    if (empty($_SESSION['__csrf'])) {
+        $_SESSION['__csrf'] = bin2hex(random_bytes(32));
+    }
+    return $_SESSION['__csrf'];
+}
+function require_csrf(): void {
+    $t = $_POST['csrf'] ?? '';
+    if (!hash_equals($_SESSION['__csrf'] ?? '', (string)$t)) {
+        json_out(['ok' => false, 'error' => 'CSRF token invalid'], 419);
+    }
+}
+
+// ------------------------------
+// 1) Backend: LLM function stub
+// ------------------------------
+if (!function_exists('llm')) {
+    /**
+     * LLM call
+     * @param string $prompt
+     * @param string|null $system_message
+     * @param array $previousConversation
+     */
+    require_once __DIR__."/../LlamaCli.func.php";
+    function llm(string $prompt, ?string $system_message = "You are a helpful assistant", array $previousConversation = []): string {
+        $opts = [];
+        if (!empty($previousConversation)) {
+            // Optionally cap context length to the last N turns
+            $N = 20;
+            if (count($previousConversation) > $N) {
+                $previousConversation = array_slice($previousConversation, -$N);
+            }
+            $opts['previousConversation'] = $previousConversation;
+        }
+        return LlamaCli_raw($prompt, $system_message ?? "", $opts);
+    }
+}
+
+// ------------------------------
+// Markdown -> HTML + sanitize
+// ------------------------------
+/** @return array{html:string, used_sanitizer:bool} */
+function md_to_safe_html(string $markdown): array {
+    $html = $markdown;
+    $used = false;
+
+    // Convert Markdown to HTML (GitHub-flavored if available)
+    if (class_exists(League\CommonMark\GithubFlavoredMarkdownConverter::class)) {
+        $converter = new League\CommonMark\GithubFlavoredMarkdownConverter([
+            'html_input' => 'strip',            // ignore raw HTML from model
+            'allow_unsafe_links' => false,
+            'max_nesting_level' => 20,
+        ]);
+        $html = (string)$converter->convert($markdown);
+    } else {
+        // Fallback: escape -> <pre> (so we never inject unsafe HTML)
+        //$html = '<pre>'.htmlspecialchars($markdown, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8').'</pre>';
+        $html = '<pre>ERROR: GitHubFlavoredMarkdownConverter not available</pre>';
+    }
+
+    // Sanitize HTML
+    if (class_exists(\HTMLPurifier::class)) {
+        $config = \HTMLPurifier_Config::createDefault();
+        // allow common formatting + code + tables + kbd
+        $config->set('Cache.DefinitionImpl', null);
+        $config->set('HTML.Allowed', implode(',', [
+            'p','br','hr','blockquote','strong','em','del','ins','u','s','sup','sub','kbd',
+            'pre','code','span','ol','ul','li',
+            'h1','h2','h3','h4','h5','h6',
+            'table','thead','tbody','tfoot','tr','th','td',
+            'a[href|title|target]','img[src|alt|title|width|height]',
+        ]));
+        $config->set('URI.SafeIframeRegexp', '%^https?://%'); // if you ever allow iframes later
+        $config->set('Attr.AllowedFrameTargets', ['_blank']);
+        $config->set('AutoFormat.AutoParagraph', false);
+
+        $purifier = new \HTMLPurifier($config);
+        $html = $purifier->purify($html);
+        $used = true;
+    }
+
+    return ['html' => $html, 'used_sanitizer' => $used];
+}
+
+// --------------------------------
+// 2) Helpers for chat persistence
+// --------------------------------
+const SESSION_KEY = 'mini_chatgpt_history';
+
+if (!isset($_SESSION[SESSION_KEY])) {
+    $_SESSION[SESSION_KEY] = [];
+}
+
+/**
+ * @return array<int, array{role:string, content:string, content_html?:string, ts:int}>
+ */
+function chat_history(): array {
+    return $_SESSION[SESSION_KEY];
+}
+
+/**
+ * @param array<string,mixed> $extra
+ */
+function chat_append(string $role, string $content, array $extra = []): void {
+    $_SESSION[SESSION_KEY][] = array_merge([
+        'role'    => $role,
+        'content' => $content,
+        'ts'      => time(),
+    ], $extra);
+}
+
+function chat_reset(): void {
+    $_SESSION[SESSION_KEY] = [];
+}
+
+// ------------------------------
+// 3) AJAX endpoints (POST only)
+// ------------------------------
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    require_csrf();
+    $action = $_POST['action'] ?? '';
+
+    // Reset
+    if ($action === 'reset') {
+        chat_reset();
+        json_out(['ok' => true]);
+    }
+
+    // Theme change
+    if ($action === 'set_theme') {
+        $theme = $_POST['theme'] ?? '';
+        if (!in_array($theme, ['light','dark'], true)) {
+            json_out(['ok' => false, 'error' => 'Invalid theme'], 422);
+        }
+        $_SESSION['__theme'] = $theme;
+        json_out(['ok' => true, 'theme' => $theme]);
+    }
+
+    // Chat
+    if ($action === 'chat') {
+        $message = trim((string)($_POST['message'] ?? ''));
+        $system  = isset($_POST['system']) ? trim((string)$_POST['system']) : null;
+
+        if ($message === '') {
+            json_out(['ok' => false, 'error' => 'Empty message'], 422);
+        }
+        if (mb_strlen($message) > 4000) {
+            json_out(['ok' => false, 'error' => 'Message too long'], 413);
+        }
+        if ($system !== null && mb_strlen($system) > 4000) {
+            json_out(['ok' => false, 'error' => 'System too long'], 413);
+        }
+
+        // Persist optional system prompt
+        if ($system !== null && $system !== '') {
+            $_SESSION['__system_prompt'] = $system;
+        }
+        $effectiveSystem = $_SESSION['__system_prompt'] ?? ($system ?: null);
+
+        // Build previousConversation from existing session history
+        $historyRaw = chat_history();
+        $previousConversation = [];
+        foreach ($historyRaw as $turn) {
+            if (!isset($turn['role'], $turn['content'])) continue;
+            if ($turn['role'] !== 'user' && $turn['role'] !== 'assistant') continue;
+            $previousConversation[] = [
+                'role'    => $turn['role'],
+                'content' => (string)$turn['content'],
+            ];
+        }
+
+        // Record current user message
+        chat_append('user', $message);
+
+        // Ask the model
+        $reply_raw = llm($message, $effectiveSystem, $previousConversation);
+
+        // Convert markdown -> sanitized HTML
+        $md = md_to_safe_html($reply_raw);
+        $reply_html = $md['html'];
+
+        // Save assistant reply (store both raw + html)
+        chat_append('assistant', $reply_raw, ['content_html' => $reply_html]);
+
+        json_out([
+            'ok'        => true,
+            'reply'     => $reply_raw,
+            'reply_html'=> $reply_html,
+            'history'   => chat_history(),
+        ]);
+    }
+
+    json_out(['ok' => false, 'error' => 'Unknown action'], 400);
+}
+
+// ------------------------------
+// 4) HTML (Bootstrap 5)
+// ------------------------------
+$history = chat_history();
+$systemPrefill = htmlspecialchars($_SESSION['__system_prompt'] ?? '', ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
+$theme = htmlspecialchars($_SESSION['__theme'] ?? 'dark', ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
+$csrf = csrf_token();
--- a/composer.json
+++ b/composer.json
@ -0,0 +1,14 @@
+{
+  "name": "mini-chatgpt/mini-chatgpt",
+  "type": "project",
+  "require": {
+    "php": ">=8.0",
+    "league/commonmark": "^2.5",
+    "ezyang/htmlpurifier": "^4.16"
+  },
+  "autoload": {
+    "psr-4": {
+      "MiniChatGPT\\": "src/"
+    }
+  }
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,93 @@
+<?php // index.php — Simple ChatGPT-like UI in a single PHP file (Bootstrap 5)
+require_once __DIR__."/backend.php"; ?>
+<!doctype html>
+<html lang="en" data-theme="<?= $theme ?>">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Mini ChatGPT (PHP + Bootstrap)</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link href="/main.css" rel="stylesheet">
+</head>
+<body>
+  <div class="container py-4 chat-wrap">
+    <div class="d-flex align-items-center mb-3 text-white">
+      <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2"><path d="M12 20h9"/><path d="M16 4h-3a2 2 0 0 0-2 2v14"/><path d="M18 14h-8"/><path d="M7 8h8"/></svg>
+      <h1 class="h4 m-0">Mini ChatGPT</h1>
+      <div class="ms-auto">
+        <button id="resetBtn" class="btn btn-sm btn-outline-light">Reset</button>
+      </div>
+      <button id="themeToggle" class="btn btn-sm btn-outline-light ms-2" aria-pressed="false">
+        Toggle Theme
+      </button>
+    </div>
+
+    <div class="accordion mb-3" id="systemAcc">
+      <div class="accordion-item">
+        <h2 class="accordion-header" id="headingOne">
+          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
+            System prompt (optional)
+          </button>
+        </h2>
+        <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#systemAcc">
+          <div class="accordion-body">
+            <textarea id="systemInput" class="form-control" rows="3" placeholder="You are a concise assistant that..."><?= $systemPrefill ?></textarea>
+            <div class="form-text">Saved in the session and applied to each message until changed.</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="chat" class="chat-box p-3 mb-3 text-white">
+      <?php if (!$history): ?>
+        <div class="text-secondary">Start the conversation below…</div>
+      <?php else: ?>
+        <?php foreach ($history as $m): ?>
+          <?php
+            $role = htmlspecialchars($m['role'] ?? '', ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
+            $ts   = (int)($m['ts'] ?? time());
+          ?>
+          <div class="msg <?= $role ?>">
+            <div class="content">
+              <?php if ($role === 'assistant' && !empty($m['content_html'])): ?>
+                <!-- Assistant: already sanitized HTML -->
+                <?= $m['content_html'] ?>
+              <?php else: ?>
+                <!-- User (or legacy items): escape + preserve newlines -->
+                <?= nl2br(htmlspecialchars($m['content'] ?? '', ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8'), false) ?>
+              <?php endif; ?>
+            </div>
+            <div class="time"><?= date('H:i', $ts) ?></div>
+          </div>
+        <?php endforeach; ?>
+      <?php endif; ?>
+    </div>
+
+    <form id="chatForm" class="card shadow-sm">
+      <div class="card-body">
+        <div class="mb-2">
+          <textarea id="messageInput" class="form-control" rows="3" placeholder="Ask something… (Shift+Enter for newline)" required></textarea>
+        </div>
+        <div class="d-flex gap-2">
+          <button id="sendBtn" type="submit" class="btn btn-primary">Send</button>
+          <button id="saveSysBtn" type="button" class="btn btn-outline-secondary">Save System Prompt</button>
+        </div>
+      </div>
+    </form>
+  </div>
+
+  <script>
+    // Expose CSRF + theme to main.js
+    window.__APP__ = {
+      csrf: "<?= $csrf ?>",
+      theme: "<?= $theme ?>",
+    };
+  </script>
+
+  <!-- Optional client-side second layer sanitation (defense-in-depth) -->
+  <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.6/dist/purify.min.js" integrity="" crossorigin="anonymous"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+  <script src="/main.js"></script>
+</body>
+</html>
--- a/index.php
+++ b/index.php
@ -0,0 +1,4 @@
+<?php 
+// index.php — Simple ChatGPT-like UI in a single PHP file (Bootstrap 5)
+require_once __DIR__."/backend.php"; 
+require_once __DIR__."/index.html";
--- a/main.css
+++ b/main.css
@ -0,0 +1,130 @@
+/* --- WhatsApp-ish palette --- */
+:root {
+  /* Dark theme (WhatsApp-like) */
+  --wa-bg: #0b141a;
+  --wa-panel: #111b21;
+  --wa-incoming: #202c33;        /* assistant (other person) */
+  --wa-outgoing: #005c4b;        /* user (me) */
+  --wa-text: #e9edef;
+  --wa-incoming-text: var(--wa-text);
+  --wa-outgoing-text: var(--wa-text);
+  --wa-muted: #8696a0;
+}
+
+html[data-theme="light"] {
+  /* Light theme (WhatsApp-like) */
+  --wa-bg: #ece5dd;
+  --wa-panel: #ffffff;
+  --wa-incoming: #ffffff;        /* assistant (other person) */
+  --wa-outgoing: #dcf8c6;        /* user (me) */
+  --wa-text: #111b21;
+  --wa-incoming-text: var(--wa-text);
+  --wa-outgoing-text: var(--wa-text);
+  --wa-muted: #667781;
+}
+
+/* Use WA background/panel */
+body { background: var(--wa-bg); color: var(--wa-text); }
+.chat-box {
+  height: 60vh; overflow-y: auto;
+  background: var(--wa-panel);
+  border-radius: .75rem;
+  border: 1px solid rgba(0,0,0,0.1);
+  padding: 12px;                 /* a bit tighter */
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Hide the old role pill if any remains */
+.role-pill { display: none !important; }
+
+/* Bubble base */
+.msg {
+  max-width: 75%;
+  padding: 8px 10px 18px;        /* extra space for time */
+  border-radius: 16px;
+  position: relative;
+  box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
+  word-wrap: break-word;
+}
+
+/* Incoming (assistant) looks like the person you're chatting with (left, grey/white) */
+.msg.assistant {
+  background: var(--wa-incoming);
+  color: var(--wa-incoming-text);
+  margin-right: auto;            /* left side */
+  border-top-left-radius: 4px;   /* WA-ish cut */
+}
+
+/* Outgoing (user) looks like your messages (right, green) */
+.msg.user {
+  background: var(--wa-outgoing);
+  color: var(--wa-outgoing-text);
+  margin-left: auto;             /* right side */
+  border-top-right-radius: 4px;  /* WA-ish cut */
+}
+
+/* Tiny time inside bubble, bottom-right */
+.msg .time {
+  position: absolute;
+  right: 8px;
+  bottom: 4px;
+  font-size: 11px;
+  opacity: 0.8;
+  color: var(--wa-muted);
+}
+
+/* Bubble tails (simple triangles) */
+.msg.assistant::after,
+.msg.user::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  width: 10px;
+  height: 10px;
+}
+
+.msg.assistant::after {
+  left: -2px;
+  background: var(--wa-incoming);
+  clip-path: polygon(100% 0, 0 0, 0 100%);
+  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.06));
+}
+
+.msg.user::after {
+  right: -2px;
+  background: var(--wa-outgoing);
+  clip-path: polygon(0 0, 100% 0, 100% 100%);
+  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.06));
+}
+
+/* Keep header/buttons readable across themes */
+.chat-wrap .d-flex.align-items-center.mb-3 { color: inherit; }
+.text-secondary { color: var(--wa-muted) !important; }
+html[data-theme="light"] #resetBtn.btn-outline-light,
+html[data-theme="light"] #themeToggle.btn-outline-light {
+  color: var(--wa-text);
+  border-color: #cbd5e1;
+}
+
+/* --- Light theme overrides for header & buttons --- */
+html[data-theme="light"] .chat-wrap .d-flex.align-items-center.mb-3 {
+  color: var(--text);            /* ensures title text is dark */
+}
+
+html[data-theme="light"] .chat-wrap h1 {
+  color: var(--text);
+}
+
+html[data-theme="light"] #resetBtn.btn-outline-light,
+html[data-theme="light"] #themeToggle.btn-outline-light {
+  color: var(--text);
+  border-color: var(--muted);
+}
+
+html[data-theme="light"] #resetBtn.btn-outline-light:hover,
+html[data-theme="light"] #themeToggle.btn-outline-light:hover {
+  background-color: var(--muted);
+  color: #fff;
+}
--- a/main.js
+++ b/main.js
@ -0,0 +1,112 @@
+// Minimal client that sends CSRF, renders assistant HTML, and toggles theme.
+
+const qs = (s, r = document) => r.querySelector(s);
+const chatEl   = qs('#chat');
+const formEl   = qs('#chatForm');
+const msgInput = qs('#messageInput');
+const sysInput = qs('#systemInput');
+const resetBtn = qs('#resetBtn');
+const themeBtn = qs('#themeToggle');
+
+function post(action, data = {}) {
+  const body = new URLSearchParams({ action, csrf: (window.__APP__ && window.__APP__.csrf) || '', ...data });
+  return fetch(location.pathname, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+    body
+  }).then(r => r.json());
+}
+
+// Simple helpers to append messages to the chat
+function appendUserMessage(text) {
+  const wrap = document.createElement('div');
+  wrap.className = 'msg user';
+  wrap.innerHTML = `
+    <div class="content">${escapeHtmlWithNewlines(text)}</div>
+    <div class="time">${nowTime()}</div>
+  `;
+  chatEl.appendChild(wrap);
+  chatEl.scrollTop = chatEl.scrollHeight;
+}
+
+function appendAssistantHtml(html) {
+  const clean = (window.DOMPurify ? DOMPurify.sanitize(html) : html);
+  const wrap = document.createElement('div');
+  wrap.className = 'msg assistant';
+  wrap.innerHTML = `
+    <div class="content">${clean}</div>
+    <div class="time">${nowTime()}</div>
+  `;
+  chatEl.appendChild(wrap);
+  chatEl.scrollTop = chatEl.scrollHeight;
+}
+
+function escapeHtmlWithNewlines(s) {
+  const t = document.createElement('div');
+  t.innerText = s;
+  return t.innerHTML.replace(/\n/g, '<br>');
+}
+
+function nowTime() {
+  const d = new Date();
+  const hh = String(d.getHours()).padStart(2,'0');
+  const mm = String(d.getMinutes()).padStart(2,'0');
+  return `${hh}:${mm}`;
+}
+
+// Submit chat
+formEl?.addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const message = msgInput.value.trim();
+  const system  = sysInput ? sysInput.value.trim() : '';
+  if (!message) return;
+
+  appendUserMessage(message);
+  msgInput.value = '';
+  msgInput.focus();
+
+  const res = await post('chat', { message, system });
+  if (res.ok) {
+    // Prefer server-rendered sanitized HTML for assistant
+    appendAssistantHtml(res.reply_html || escapeHtmlWithNewlines(res.reply || ''));
+  } else {
+    appendAssistantHtml(`<p class="text-danger">Error: ${res.error || 'Unknown'}</p>`);
+  }
+});
+
+// Save system prompt
+qs('#saveSysBtn')?.addEventListener('click', async () => {
+  const message = '';
+  const system  = sysInput ? sysInput.value.trim() : '';
+  if (!system) return;
+  // Use a no-op message to persist system prompt? Better: do nothing and let backend save on 'chat'
+  // Here we just show a toast-like confirmation:
+  appendAssistantHtml('<em>System prompt saved for next messages.</em>');
+});
+
+// Reset chat
+resetBtn?.addEventListener('click', async () => {
+  const res = await post('reset', {});
+  if (res.ok) {
+    chatEl.innerHTML = `<div class="text-secondary">Start the conversation below…</div>`;
+  }
+});
+
+// Theme toggle
+themeBtn?.addEventListener('click', async () => {
+  const current = (window.__APP__ && window.__APP__.theme) || 'dark';
+  const next = current === 'dark' ? 'light' : 'dark';
+  const res = await post('set_theme', { theme: next });
+  if (res.ok) {
+    document.documentElement.setAttribute('data-theme', next);
+    window.__APP__.theme = next;
+  }
+});
+
+// With "enter" key press, send message
+msgInput.addEventListener('keydown', e => {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault();     // stop newline
+    formEl.dispatchEvent(new Event('submit', {cancelable: true}));
+  }
+});