Lompat ke konten
dokumentasi.id
Commit d59d965
v3
Star763

1

Ringkasan Proyek

github-roast adalah aplikasi web berukuran kecil dengan dua bagian: satu halaman yang meminta username GitHub dan bahasa, serta satu endpoint POST /llama yang mengambil profil publik lalu meminta gpt-4o-mini menulis roast singkat. README menyebut tumpukannya dalam satu baris: SvelteKit, Cloudflare Pages, Cloudflare D1, OpenAI gpt-4o-mini (README.md:1-3). Proyek di-build memakai @sveltejs/adapter-cloudflare (svelte.config.js:10), sehingga hasil build berjalan sebagai Pages Function dan bukan server Node biasa.

Halaman utama berupa form sederhana yang di-prerender menjadi aset statis (src/routes/+page.js:3). Form itu mengirim POST /llama dengan body { username, language } (src/routes/+page.svelte:39-45). Seluruh logika produk berada di satu berkas endpoint src/routes/llama/+server.js.

Peta modul

Satu request roast melewati empat titik: halaman, cache di tabel roasts, GitHub REST API, lalu OpenAI.

graph TD
  UI["+page.svelte<br/>input username + select language"] -->|"POST /llama"| API["llama/+server.js"]
  API --> CACHE{"roasts lookup<br/>gh_username + language"}
  CACHE -->|"cache hit"| OUT["response roast"]
  CACHE -->|"cache miss"| GH["GitHub REST API"]
  GH --> DATAS["datas: profil + README + 15 repo"]
  DATAS --> PROMPT["prompt sesuai language"]
  PROMPT --> LLM["OpenAI gpt-4o-mini"]
  LLM --> STORE["INSERT INTO roasts"]
  STORE --> OUT
  OUT --> UI
  D1[("D1 binding DB")] --- CACHE
  D1 --- STORE
  ENV["OPENAI_API_KEY<br/>GITHUB_API_KEY"] -.-> API
  style D1 fill:#336791,color:#fff
  style STORE fill:#336791,color:#fff
  style CACHE fill:#8b5cf6,color:#fff
  style DATAS fill:#8b5cf6,color:#fff
  style PROMPT fill:#8b5cf6,color:#fff
  style API fill:#f59e0b,color:#000
  style ENV fill:#f59e0b,color:#000
  style GH fill:#2d7d46,color:#fff
  style LLM fill:#2d7d46,color:#fff
  style OUT fill:#2d7d46,color:#fff
%% fig: Peta modul github-roast
%% desc: Satu request roast berpindah dari halaman SvelteKit ke endpoint, cache tabel roasts, GitHub REST API, lalu gpt-4o-mini, dan kembali ke pengguna.
Fig. 1: Peta modul github-roastSatu request roast berpindah dari halaman SvelteKit ke endpoint, cache tabel roasts, GitHub REST API, lalu gpt-4o-mini, dan kembali ke pengguna.

Berkas yang menyusun aplikasi

BerkasPeranDibahas di
src/routes/+page.svelteform username, pemilih bahasa, render hasil roastAntarmuka Pengguna
src/routes/llama/+server.jshandler POST, cache, GitHub fetch, prompt, OpenAIEndpoint POST /llama
database.sqlCREATE TABLE roasts dan gh_username_idxModel Data Tabel roasts
wrangler.tomlnama Pages, pages_build_output_dir, binding D1Konfigurasi Environment dan Binding
.env.exampledaftar variabel environment yang dibutuhkanMemulai
svelte.config.jspemilihan @sveltejs/adapter-cloudflareDeployment ke Cloudflare Pages

Tumpukan dan nilai konfigurasi

LapisanNilai di repositorySumber
Framework@sveltejs/kit ^2.0.0, svelte ^4.2.7package.json:13-27
Adapter@sveltejs/adapter-cloudflare ^4.7.0package.json:15
Nama Pages dan outputgithubroast, .svelte-kit/cloudflarewrangler.toml:2-4
DatabaseD1 dengan binding DB, database_name = "githubroast"wrangler.toml:28-31
Tabelroasts: id, gh_username, response, created_at, country, languagedatabase.sql:2-9
Klien LLMopenai ^4.54.0, model gpt-4o-minipackage.json:30-34
Render markdownsvelte-markdown ^0.4.1package.json:30-34

Variabel environment yang ada di .env.example adalah OPENAI_API_KEY, GITHUB_API_KEY, dan TELEGRAM_API_KEY (.env.example:1-3). Endpoint hanya mengimpor dua yang pertama (src/routes/llama/+server.js:1-7).

Satu request, empat langkah

  1. Endpoint memeriksa language terhadap validLanguages yang berisi 11 nilai, lalu menjalankan SELECT * FROM roasts WHERE gh_username = ? AND language = ?; kalau ada baris cocok, roast lama langsung dikembalikan tanpa memanggil GitHub (src/routes/llama/+server.js:29-47).
  2. Pada cache miss, endpoint mengambil profil dan daftar repo dari GitHub REST API, membaca README.md dari branch main atau master, lalu merakit object datas berisi name, bio, company, location, followers, following, public_repos, profile_readme, dan 15 repo terakhir (src/routes/llama/+server.js:111-131).
  3. datas disisipkan ke prompt sesuai bahasa, lalu dikirim ke client.chat.completions.create dengan model: 'gpt-4o-mini' dan stream: false (src/routes/llama/+server.js:180-191).
  4. Hasil roast dikembalikan sebagai { roast } dan dicoba disimpan ke tabel roasts; halaman menampilkannya lewat SvelteMarkdown (src/routes/llama/+server.js:195-208, src/routes/+page.svelte:104-111).

⚠️ Pemilih bahasa di UI memuat 15 pilihan, termasuk german, italian, finnish, dan portuguese, sedangkan validLanguages di endpoint hanya menerima 11 nilai. Memilih bahasa di luar daftar itu berakhir dengan status 400 dan pesan invalid language specified, please pass a valid language. (src/routes/+page.svelte:12-28, src/routes/llama/+server.js:15-27, src/routes/llama/+server.js:33-38). Rinciannya ada di Prompt Multibahasa.

⚠️ INSERT di endpoint menyebut kolom ip_address, tetapi database.sql tidak membuat kolom itu. Kegagalan insert ditelan blok catch {} kosong, sehingga response roast tetap terkirim ke pengguna meski barisnya tidak tersimpan (src/routes/llama/+server.js:195-208, database.sql:2-9). Rinciannya ada di Model Data Tabel roasts.