Deepseek 1.5b on an "old-ish" laptop
okay, I admit I wasn't expecting much. I was surprised. I have ollama running locally, so I just pulled the 1.5b model down over my 4G connection.
The token output was pretty fast, for instance, it was outputting at a rate that I would consider equiv. to getting it from a cloud service. It was as fast as I could read, just, sometimes it was going faster.
My 1 minute experiment was this: I asked for some javascript code to be written to render a 3D world in a web-browser and to explain what was being done.
The first section of the output showed the "reasoning" logic and "arguments" that were going on between the internal workings of the model. Now, I recall doing this myself about 2years ago when I first built E.L.VIS - long story, won't go into it - but I was asked to "stop" as I was getting to ahead of everyone else, including myself. As it was me, I not only stopped, I walked away & focused on "other things".
Now though, it looks like this stuff is now the norm. brilliant.
I left this screenshot to show just how little RAM is being consumed here - this was a fresh boot of the laptop (the laptop is about 5(?) years old now? so, by todays standards it is ancient!)
note the <think> tags that the model has put into place to show this is the "logic" that it is working it's way through, you see the end </think> tag in the screenshot below:
Now, I never mentioned the usage of HTML, I stated Javascript - but I did say to render within a web-browser, so I like the fact it determined that it needed some HTML to do that rendering, rather than let's say just give me code output for nodejs.
It is interesting that it chose to recommend Three.js - at least this DOES exist & it didn't just make up a library. An impressive javascript library at that! go check out the examples:
Next, the model returns the Step by step explanation / pseudo-code of what it is proposing:
(cos I'm an idiot I think I missed a screenshot here, but the full transcript is below)
I do like the fact it tells me how "I" can enhance it further.
Sigh. okay - let me go copy / paste and see how it renders / works in a web browser.
okay, it's not a 3D world - but it IS an animated 3D cube that spins around. Now, I'll graft the code that the model generated into there & just "see" what it was trying to create.
It is actually interesting that it animated / rotates the 2 different sized cubes inside / around each other - I'm not going through the effort of trying to capture a video.
LOL - of course it doesn't work :-) and THIS is the point I've been trying to get across to non-technical people, you now need someone with a little bit of savvy to get it to work, it's a great booster of initial implementation idea's, but it won't replace needing the programmer. Maybe a larger model would have created a better response? I'll need to test that.
This also highlights that for a non technical person the output "looked" good, it looked like it would "do the job", however, it doesn't. Do go thinking that the programmer is dead, far from it.
Let me now actually look at the code in more detail & figure out how to actually get it to work. I'm intrigued now & I have an hour to spare.
Hmmm....sadly, after digging deeper into the website:
and
it became clearer that this is a bit of a mess & whilst there ARE elements inside the code that can be useful, it is very far from just "run out of the box".
I'm not going to give up though, I want to see what is actually required. Is it a better prompt? is it a bigger model? let's see.
UPDATE:
of course I couldn't just leave it there..... I tweaked from the above online docs & a little merge and I now have this code:
okay, it's not a 3D world - but it IS an animated 3D cube that spins around. Now, I'll graft the code that the model generated into there & just "see" what it was trying to create.
UPDATE2:
Because y'know, I cannot walk away, I morphed more of the original code into the above & the following was the result:
It is actually interesting that it animated / rotates the 2 different sized cubes inside / around each other - I'm not going through the effort of trying to capture a video.
So....that is in essence what the CODE was attempting to output. However, it is NOT a "world", well, it might be a flat-earther world, oh, hang on, no, I've got that wrong, it's a cube world, anyway, it's not a traditional "planet" world in a potato / circle shape.
So, I think I've just proven my point. If you kinda know what you're doing codewise, you could probably go build this yourself from scratch quicker than trying to decipher / debug the original code. However, it DID introduce me to the THREEJS library and the animations / camera / zooming side of things - so THAT'S A BONUS!!! I've now got to hink how I might use that in future mini-projects :-D
THIS was the code I was expecting to be provided with:
Full transcript output:
>>> imagine that you are the best javascript coder. I want you to write a javas
... cript application that I can run that renders a 3d world within a web browse
... r. provide instructions on how the javascript code works so that I can under
... stand it
<think>
Okay, so the user wants me to imagine being the best JavaScript coder and
create a JavaScript app that renders a 3D world in a web browser. Hmm,
they said "best" which makes me think they're looking for something really
impressive or educational.
First, I need to figure out what technologies are involved here. HTML5
Canvas is the go-to for animations and rendering things on the web. CSS
transforms can help manipulate the 3D perspective. Maybe using some
libraries would make it easier than trying everything from scratch, so I
remember that Three.js is a popular WebGL renderer library.
Wait, the user said "I want you to write JavaScript code," but I know
Three.js is built on top of Canvas. So, should I include both? Or perhaps
start with the basics using Canvas and then add the libraries for better
functionality. But maybe it's simpler just to focus on the core concepts
first before diving into libraries.
They mentioned the user can run the code and understand how it works. So,
the instructions need to be clear and educational. Maybe break down each
part step by step, explaining what each piece does so that even someone
without much coding experience can follow along.
I should outline the structure: how the scene is set up (ambient, point
light), camera controls for users, lights, objects, and maybe some
animation loop. I'll explain how each of these contributes to creating the
3D effect.
Also, considering responsiveness is key. The user might want a
mobile-friendly app, so including touch controls with panning and zooming
would be smart. Maybe using event listeners or API calls for that.
Oh, but if the user really wants something like an interactive web-based
3D viewer without external libraries, I could suggest WebGL directly in
the browser, though it's less smooth than Three.js. But I think Three.js
is more modern and better for this purpose.
I need to make sure my instructions are comprehensive yet easy to follow.
Perhaps include some comments or code snippets as if I were explaining
them step by step, so the user can understand each part without looking up
too much documentation.
Wait, maybe I should mention how to test it – opening the HTML file in a
browser and trying different things. That helps ensure they know where to
go to try it out themselves.
Oh, and considering edge cases or potential issues, like camera
positioning or lighting angles affecting visibility. Explaining these will
make their experience more complete and prepared for any issues that
arise.
I think I've covered the main points. Now, I'll structure my response by
first setting up the basic HTML file with the necessary scripts and
styles, then explain each component one by one, leading the user through
how it all comes together.
</think>
To create a 3D world visualization in a web browser using JavaScript, you
can utilize libraries like Three.js (which is built on top of Canvas).
Below, I'll provide a complete example that demonstrates how to render a
simple 3D scene with basic implementation. This will include setting up
the necessary environment, creating the scene, adding objects, lighting,
and implementing animation.
### Step-by-Step Explanation
1. **Set Up the HTML File:**
Create an HTML file with a container for your scene.
2. **Add Necessary Scripts:**
Include Three.js in your project.
3. **Initialize the Canvas and Scene:**
Use Three.js' Canvas to set up the 3D scene.
4. **Create Objects (Lighting):**
Add some basic shapes that will act as light sources for the scene.
5. **Add Lights:**
Introduce ambient and point lights to create shading effects.
6. **Implement Animation:**
Create a loop to animate the objects in the scene.
7. **Handle Camera Controls:**
Add event listeners for camera movement (panning, zooming).
8. **Handle User Input:**
Allow users to rotate, pan, and zoom using keyboard controls.
9. **Initialize Three.js and Canvas:**
Get the scene, camera, renderer, and maybe an OrbitControls for better
user interaction.
### Complete Code
```html
<!DOCTYPE html>
<html>
<head>
<title>3D World Visualization</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<!-- Three.js Scene initialization -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></ssrc="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/threemin.js"></script>
<script>
// Create scene, camera, and renderer
let scene, camera, renderer;
window.addEventListener('load', loadScene);
document.addEventListener('addEventListener', changeCamera);
function loadScene() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth /
window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer({ antialias: true });
// Add lights
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);
// Add cubes as objects
const cube1 = new THREE.BoxGeometry(2, 2, 2);
const material1 = new THREE.Mesh(cube1, { color: 0x00ff00 });
scene.add(metallicLight + cube1);
const cube2 = new THREE.BoxGeometry(4, 2, 2);
const material2 = new THREE.Mesh(cube2, { color: 0xff0000 });
scene.add(shininessLight + cube2);
camera.position.z = 5;
// Position camera
camera.position.set(3, 3, 3);
camera.lookAt(0, 0, 0);
renderer.setSize(window.innerWidth);
renderer.setPixelRatio(window.devicePixelRatio());
document.body.appendChild(renderer.domElement);
return scene;
}
function changeCamera(event) {
event.preventDefault();
camera.position.z = -5;
}
// Animation loop
function animate() {
requestAnimationFrame(animate);
// Rotate object based on mouse position
cube1.rotation.x += (event.movement.y > 0 ? 0.02 : -0.02);
cube1.rotation.y += event.movement.x;
// Animate mesh objects
renderer.render(scene, camera);
}
// Start animation
animate();
// Handle window resize
window.addEventListener('resize', onWindowResize, false);
function loadWindowResize() {
scene.width = window.innerWidth;
scene.height = window.innerHeight;
}
</script>
</body>
</html>
```
### Explanation
1. **Setting Up the Scene:**
- Three.js is loaded from a CDN.
- A scene container is created with `new THREE.Scene()`.
2. **Initializing Canvas and Scene:**
- The camera is set up using a perspective camera.
- The renderer initializes WebGL for rendering in the browser.
3. **Creating Objects (Lighting):**
- Two cubes are created, each with custom materials to provide basic
lighting effects.
4. **Adding Lights:**
- An ambient light provides overall illumination.
- A point light adds directional lighting effect.
5. **Scene Setup:**
- The scene is built by adding all elements (light sources and
objects).
6. **Animation Loop:**
- This loop handles the rendering of the scene continuously.
- Mouse movements add tilt/push controls for interactive viewing.
7. **Camera Controls:**
- Event listeners detect mouse movement to rotate the camera.
- The camera is initially positioned at a certain point, and changes
are made based on mouse position.
8. **Handling Windowsize:**
- If the window size changes, it updates the scene's dimensions in
real-time.
9. **Resizing Handler:**
- When the window is resized, the initial setup (camera and renderer)
is cleared to reflect the new dimensions.
### How It Works:
- This code creates a basic 3D scene with:
- A perspective camera positioned at an angle.
- Two colored cubes for lighting effects.
- Interactive mouse controls for panning and zooming.
- Continuous animation of the scene based on the camera's movement.
To enhance this further, you could:
- Add more complex lighting patterns or textures.
- Include more objects (like a sky layer).
- Implement camera controls that respond to touch events for better 3D
interaction.
- Add real-time controls for panning and zooming using WASD or trackpad
moves.
This example provides a solid foundation in creating basic WebGL scenes,
which can be extended with additional features for more complex
visualizations.
Comments
Post a Comment