Dinamis Web Respon dengan Gemini
Di Upload : Sabtu, 26 Juli 2025
Di Perbarui : Sabtu, 26 Juli 2025
Oleh : Rizkid
Gatau cuyy gabut aja awoakowak, jadi intinya gini gw kemarin liat di post Fesnuk gatau intinya kaya buat halaman web berdasarkan keyakinan masing masing :v ahh gatau gw jelasin nya noh coba aja sendiri, btw pake NodeJS Yee kalo blum install y install dlu hehehe
contoh hasil yang udah w deployy di vercel, btw load nya lama y anjirrr jadi y taulah yaa hehehe
nih coba siji LINK[https://bingungkasihkonsep.vercel.app]
• Install dlu
• nih code nya
Selamat Mencoba leee anjayyy😘😘😘🗿
contoh hasil yang udah w deployy di vercel, btw load nya lama y anjirrr jadi y taulah yaa hehehe
nih coba siji LINK[https://bingungkasihkonsep.vercel.app]
• Install dlu
.bashnpm i express axios
• nih code nya
.js//Sesuai-in ama type js lu yee kalo pake //comonjs y di ganti
//const express = require ("express")
//dan seterusnya
//ok well gass eksekusi ajaa
import express from "express";
import axios from "axios";
const app = express();
const apiUrl = "https://gemini-api.zone.id/gemini/chat";
async function postGemini() {
function genRandomColor() {
const randomColor = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, '0');
return randomColor;
}
function randomWeb() {
const web = ["pendidikan", "store", "edukasi", "perusahaan", "sekolah", "portofolio", "berita", "blog", "ecommerce", "komunitas"];
const randomIndex = Math.floor(Math.random() * web.length);
return web[randomIndex];
}
function randomLang() {
const lang = ["Indonesia", "inggris", "jepang", "rusia", "arab"];
const randomIndex = Math.floor(Math.random() * lang.length);
return lang[randomIndex];
}
const promptGemini = {
"prompt": `buatkan landing page html css statis sederhana dengan tema kode warna ${genRandomColor()} untuk web ${randomWeb()}, buat web tersebut dengan bahasa ${randomLang()} langsung respon saya dengan kode tersebut!`
};
try {
const response = await axios.post(apiUrl, promptGemini, {
headers: {
'Content-Type': 'application/json'
}
});
return response.data.content;
} catch (error) {
console.error('Terjadi kesalahan saat mengirim permintaan ke Gemini API:', error.message);
if (error.response) {
console.error('Detail kesalahan dari API:', error.response.data);
console.error('Status HTTP:', error.response.status);
}
throw new Error('Gagal mendapatkan respons dari Gemini API.');
}
}
function parseGeminiResponseToHtml(geminiContent) {
const htmlMatch = geminiContent.match(/```html\n([\s\S]*?)\n```/);
const cssMatch = geminiContent.match(/```css\n([\s\S]*?)\n```/);
let htmlOutput = "";
let cssOutput = "";
if (htmlMatch && htmlMatch[1]) {
htmlOutput = htmlMatch[1];
}
if (cssMatch && cssMatch[1]) {
cssOutput = `<style>\n${cssMatch[1]}\n</style>`;
}
if (!htmlOutput) {
if (geminiContent.includes("<!DOCTYPE html>") || geminiContent.includes("<html")) {
return geminiContent;
}
return "<h1>Konten HTML tidak dapat diurai dari respons Gemini.</h1><pre>" + geminiContent + "</pre>";
}
if (htmlOutput.includes("<head>")) {
htmlOutput = htmlOutput.replace("<head>", `<head>\n${cssOutput}`);
} else {
htmlOutput = `${cssOutput}\n${htmlOutput}`;
}
return htmlOutput;
}
app.get("/", async (req, res) => {
try {
const rawGeminiContent = await postGemini();
const finalHtmlOutput = parseGeminiResponseToHtml(rawGeminiContent);
res.setHeader('Content-Type', 'text/html');
res.send(finalHtmlOutput);
} catch (error) {
console.error(error.message);
res.status(500).json({
status: "false",
msg : "heheheh error"
});
}
});
app.use((req,res)=>{
res.redirect("/")
})
app.listen(3000, () => {
console.log("Server berjalan di http://localhost:3000");
});
Selamat Mencoba leee anjayyy😘😘😘🗿