Generowanie kodu i podgląd artefaktów w WebUI z codegemma:7b
Przetłumaczone automatycznie z angielskiego. Przeczytaj oryginał
Wygeneruj WebGL, Three.JS, HTML, CSS, JavaScript, bez kodu w Pythonie, pojedynczą stronę z obracającym się sześcianem i oświetleniem otoczenia. Ładuj biblioteki z CDN. Niech oświetlenie otoczenia będzie takie, żeby krawędzie sześcianu były widoczne. Dodaj też światło kierunkowe skierowane na sześcian. Scena musi dać się nawigować strzałkami. Zapewnij kompatybilność z przeglądarkami.
Za pomocą codegemma:7b możesz generować kod źródłowy. Jeśli odpowiednio poprosisz, w czacie WebUI pojawi się funkcja artefaktów, która interpretuje Twój kod źródłowy od razu po jego wygenerowaniu. Ta funkcja przydaje się projektantom, deweloperom i marketingowcom, którzy chcą przyspieszyć tworzenie szkieletu rozwiązania i przejście od burzy mózgów do widocznego, działającego rezultatu.
Możesz używać bibliotek do wizualizacji, Three.js, D3.js albo dowolnego innego kodu HTML, CSS i JavaScript. Ważne, żeby prosić o jednostronicową zawartość w jednym pliku, ze wszystkimi bibliotekami ładowanymi z CDN. Używaj słów „change” lub „update”, aby zmodyfikować zawartość, albo „rewrite”, „redesign”, aby całkowicie ją przerobić.
A oto kod źródłowy wygenerowany przez codegemma:7b:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Rotating Cube with Ambient and Directional Lighting</title>
<style>
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.z = 3;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshLambertMaterial({ color: 0x444444 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);
let rotation = 0;
const animate = () => {
requestAnimationFrame(animate);
rotation += 0.01;
cube.rotation.y = rotation;
renderer.render(scene, camera);
};
animate();
const moveCamera = (event) => {
switch (event.key) {
case "ArrowUp":
camera.position.z -= 0.1;
break;
case "ArrowDown":
camera.position.z += 0.1;
break;
case "ArrowLeft":
camera.position.x -= 0.1;
break;
case "ArrowRight":
camera.position.x += 0.1;
break;
}
};
document.addEventListener("keydown", moveCamera);
</script>
</body>
</html>