RF LLMEval - Bahasa Pemrograman Berbasis Prompt

RAKIFSUL
Aplikasi
RF LLMEval - Bahasa Pemrograman Berbasis Prompt

Table of Contents

Saya telah membuat percobaan penggunaan LLM untuk menggenerate kode HTML, CSS, dan JS yang bisa langsung dijalankan selama 3 detik.

Model yang digunakan adalah gemma3:1b, namun entah kenapa model tersebut gagal menghapus markdown snippet melalui system prompt. Akhirnya saya memperbaikinya dengan kode JavaScript biasa.

Tutorialnya ada di postingan ini.

Setelah dicoba dengan model lain yang lebih besar (saya lupa pakai model apa), markdown snippet berhasil dihapus dengan system prompt.

Cara Kerja

Aplikasi ini memproses prompt dari textarea untuk di fetch ke Ollama API endpoint dan didapatkan hasilnya berupa kode.

Kode HTML, CSS, JS tersebut kemudian dijalankan dalam halaman yang sama selama 3 detik.

Teknologi yang Digunakan

  • HTML, CSS, JS
  • Ollama dengan model gemma3:1b

Screenshot

Rekonstruksi

Untuk membuat aplikasi seperti ini, Anda harus menyiapkan Ollama dan Open WebUI terlebih dahulu karena nanti aplikasi ini akan berkomunikasi dengan server Ollama.

Panduan setup Ollama dan Open WebUI bisa dibaca di artikel ini.

Selanjutnya, buatlah folder dan buka dengan VSCode.

Di dalam folder tersebut, buat file:

  • project/index.css
  • project/index.html
  • project/index.js

Isi dari script-script tersebut ada di subbab di bawah ini.

Nanti jika sudah selesai ditulis, silakan coba jalankan dengan HTTP server misalnya dengan extension Live Server dari VSCode. Jika dijalankan tanpa server, aplikasi ini tidak akan bekerja semestinya.

project/index.css

body {
    background-color: cornflowerblue;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 20px;
    bottom: 20px;
}

h1 {
    color: salmon;
    background-color: gray;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    padding-top: 1%;
}

textarea {
    position: relative;
    width: 100%;
    height: 70vh;
    box-sizing: border-box;
    font-family: 'Courier New', Courier, monospace;
}

button {
    position: relative;
    width: 100%;
    height: 5vh;
    font-family: 'Courier New', Courier, monospace;
    background-color: salmon;
}

project/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LLMEval.js v1.0.0</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div>
        <h1>LLMEval.js - Human Coding Language</h1>
        <textarea id="txa-prompt" placeholder="tulis prompt anda di sini dengan bahasa inggris..."></textarea>
        <button id="btn-exec">Execute selama 3 Detik</button>
    </div>
    <script src="index.js"></script>
</body>

</html>

project/index.js

// ollama endpoint
const ollamaAPIEndpoint = "http://localhost:11434/api/generate";

// ollama model
const ollamaModel = "gemma3:1b";

// system prompt ini gagal menghilangkan backtick untuk snippet. 
// barangkali Anda tahu solusinya selain dengan algoritma biasa?
const systemPrompt = `
jawab dengan kode html, css, dan javascript.
jawaban tadi harus tanpa format markdown sama sekali
dan tanpa format markdown snippet
dan tanpa karakter backtick snippet
harus seperti itu.
`;

// on load
window.addEventListener("load", async function () {
    // dapatkan elemen button
    const btnExec = document.getElementById("btn-exec")

    // saat elemen button diklik
    btnExec.addEventListener("click", async function (evt) {
        const prompt = document.getElementById("txa-prompt").value;
        console.log(prompt)
        await llmEval(prompt)
    })
})

// melakukan reply
async function llmEval(prompt) {
    // request ke ollama API
    const rawResponse = await fetch(ollamaAPIEndpoint, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            model: ollamaModel,
            prompt: prompt,
            system: systemPrompt,
            stream: false
        })
    });

    // cleanup response
    const jsonResponse = await rawResponse.json();
    let response = jsonResponse.response;
    response = removeMarkdownSnippet(response)
    console.log(response);

    // replace main window
    let mainWindow = document.getElementsByTagName('html')[0];
    mainWindow.innerHTML = response;

    // reload dan restore setelah 3 seconds
    setTimeout(function () {
        location.reload();
    }, 3000)
}

// solusi kegagalan system prompt
function removeMarkdownSnippet(text) {
    // RegEx untuk menangkap dan menghapus kode dalam tiga backtick + jenis bahasa
    return text.replace(/```[a-zA-Z0-9]*\s*(.*?)```/gs, '$1');
}

Download Source Code-nya