---
title: "Generowanie kodu i podgląd artefaktów w WebUI z codegemma:7b"
url: https://michalasobczak.pl/pl/posts/code-generation-and-artifacts-preview-with-webui-and-codegemma7b.html
author: "Michał Sobczak"
description: "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."
published: 2025-03-18T13:55:52.000Z
updated: 2025-03-23T10:46:52.000Z
language: pl
categories: ["AI/ML"]
tags: ["AI/ML", "LLM", "Ollama"]
license: CC BY-NC-ND 4.0 (https://creativecommons.org/licenses/by-nc-nd/4.0/)
---
# Generowanie kodu i podgląd artefaktów w WebUI z codegemma:7b

> 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.

[Video](https://michalasobczak.pl/wp-content/uploads/2025/03/Screencast-from-18.03.2025-125707.webm)

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ć.

![](https://michalasobczak.pl/wp-content/uploads/2025/03/image-76.png)

A oto kod źródłowy wygenerowany przez codegemma:7b:

```javascript
<!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>
```