- Видео 23
- Просмотров 139 785
Code Workshop
США
Добавлен 20 май 2019
Code Workshop is a community of software developers doing projects together to learn new skills.
How to Run an Open Source AI Text Editor
ModelPad is an open source text editor I built with React and Go. It supports generating text with Anthropic and Ollama LLM models, and document vector search.
In this project we will use ModelPad as an example app to explore some of the most important concepts of building LLM integrated applications.
In Part 1 we will get an introduction to Model Pad and get it up and running on our local machines by installing the required dependencies, setting up the environment variables, and building the project.
Live Demo:
modelpad.app/
GitHub Repo:
github.com/SteveCastle/modelpad
0:00 Introduction
03:30 Cloning the Git Repository
03:55 Installing Node and Go
04:29 Getting a SuperTokens Account and Credentia...
In this project we will use ModelPad as an example app to explore some of the most important concepts of building LLM integrated applications.
In Part 1 we will get an introduction to Model Pad and get it up and running on our local machines by installing the required dependencies, setting up the environment variables, and building the project.
Live Demo:
modelpad.app/
GitHub Repo:
github.com/SteveCastle/modelpad
0:00 Introduction
03:30 Cloning the Git Repository
03:55 Installing Node and Go
04:29 Getting a SuperTokens Account and Credentia...
Просмотров: 205
Видео
How to Capture and Render a 3D Gaussian Splat in React Three Fiber
Просмотров 1 тыс.11 месяцев назад
We'll go from just a few pictures of a real world scene to a fully rendered and controllable 3D scene running in the browser with React Three Fiber. Poly.Cam Gaussian Splat Creator poly.cam/tools/gaussian-splatting antimatter15/splat GitHub Repo github.com/antimatter15/splat Finished Code Sandbox of Tutorial codesandbox.io/p/sandbox/3d-gaussian-splat-in-react-three-fiber-mw5j2m 00:00 - Project ...
How to Fix CORS Errors for Good by Understanding CORS
Просмотров 234Год назад
Let's take a look at two very stripped down web servers running on different domains and figure out what the heck is actually happening specifically when we get a CORS Error. CODE EXAMPLE: github.com/SteveCastle/cors-example/tree/master
How to Animate Object Motion in React Three Fiber
Просмотров 1,3 тыс.Год назад
Vector3's are an essential datatype for working with Three.JS and React Three Fiber, especially when animating. Let's run through a project to learn how to use them and build an intuition for 3D motion and animation in the process. We will cover how to use Vector3s to represent position, velocity, acceleration, and forces. We'll also use React Three Fiber to animate an object using these values...
Make Any Image 3D With React Three Fiber
Просмотров 4,6 тыс.2 года назад
In this video I explain how to create a depth map for any image using an Open Source machine learning model and then use that image and depth map to create a custom shaderMaterial in React Three Fiber with a Fragment Shader that creates a cool pseudo 3D parallax effect. Code Sandbox Project: codesandbox.io/s/pseudo3d-shader-in-react-three-fiber-5ci3hs MiDAS Depth Estimation Model Try it online ...
How To Use React Three Fiber Post Processing Shaders
Просмотров 3,2 тыс.2 года назад
Learn how to use React Three Fiber PostProcessing shaders and the Drei Text and Image components to create a cool cyberpunk terminal. We'll also generate some character art with Stable Diffusion to use as assets in our project. React Three Fiber Starter Template: codesandbox.io/s/react-three-fiber-starter-kit-ot1fz Finished Project Demo: codesandbox.io/s/react-three-fiber-postprocessing-demonst...
Running Stable Diffusion on AWS with an Insane 8GPU 196GB Video Memory EC2 Instance
Просмотров 10 тыс.2 года назад
Let's set up a workflow for experimenting with Stable Diffusion (or other machine learning work) on an AWS EC2 instance designed for Machine Learning engineers. We'll cover provisioning the instance, installing the Stable Diffusion code and models, configuring the EC2 instance to share files via an S3 bucket, and try doing our first text2image and image2image model runs on EC2. I'll also show y...
HTML5 Canvas Drawing with Bitwise Patterns
Просмотров 3682 года назад
Learn how to draw some really cool-looking patterns to the HTML5 canvas element using the 2D drawing context, Bitwise Operators, and the Modulo Operator. Finished Project Code Sandbox: codesandbox.io/s/drawing-with-bitwise-operators-and-modulo-finished-project-jnk37 0:00 Intro 1:29 Bitwise Opertors Overview 4:19 Modulo Operator Overview 5:05 Creating Patterns with Bitwise Operators and Modulo 8...
Controlling Multiple Character Animations In React Three Fiber
Просмотров 11 тыс.3 года назад
In this React Three Fiber tutorial, we add 4 separate animations to a Mixamo character in Blender, export the animation in a format you can use in React, and create a React Three Fiber app with buttons to switch between the animations with a simple fade between the animations. If you've already seen the previous video on importing rigged characters the beginning may be a bit repetitive but it h...
Deploy a React Three Fiber App to a Free Production Web Host Using Netlify
Просмотров 2,3 тыс.3 года назад
This video is a little different. A few people have asked me how to get their projects hosted online with a domain name. In this video, I'll walk you through how I would publish and deploy a React Three Fiber app using Github, Netlify, and Google Domains. When we're done we'll have a production-ready React web app (with R3F) hosted on the Netlify CDN, secured with HTTPS/SSL and a fantastic prof...
Fast Physics Simulation in React Three Fiber With Cannon
Просмотров 9 тыс.3 года назад
You can add a physics simulation to a react-three-fiber scene with the wonderful @react-three/cannon library. Cannon makes it a breeze to add collisions, gravity, and more to any scene. In this tutorial, we will enhance an existing React Three Fiber scene with physics by importing the library, and connecting objects to the simulation using the hooks and provider component from the library. 0:00...
React Three Fiber Fundamentals: 3D Coordinates and Transforms
Просмотров 8 тыс.3 года назад
Learn how to visualize the React Three Fiber Coordinate system and apply basic transforms like position, rotation, and scale to objects. Follow along with the interactive Code Sandbox: codesandbox.io/s/react-three-fiber-lighting-essentials-qwxb8?file=/src/App.js
Using VideoTexture and Glitch Effects in React Three Fiber
Просмотров 9 тыс.3 года назад
Learn how to use React, Three.js, and React Three Fiber to create a spooky floating TV scene with Three.js VideoTexture and EffectComposer. We'll also see how you can use the Drei helper library to save some time and complexity working with react-three-fiber. Project Starting Point codesandbox.io/s/spooky-floating-tv-project-starting-point-fmgsj Completed Project codesandbox.io/s/videotexture-i...
Loading Animated Characters in React Three Fiber
Просмотров 44 тыс.4 года назад
Learn how to import an animated character that was created in Blender to React and Three.js using React Three Fiber. We will use a pre-rigged and animated character from Mixamo so don't worry if you don't know how to model and animate in Blender. Get pre built models and animations. www.mixamo.com Download Blender www.blender.org/download/ React Three Fiber Starter Project on Code Sandbox codes...
React Three Fiber - Create Landscapes using Displacement Maps
Просмотров 4,6 тыс.4 года назад
Create 3D terrain geometry in React Three Fiber using real-world Elevation Data from GIS software as a displacement map applied to a Three.js meshStandardMaterial. Learn how to use Digital Elevation Models of the Hawaiian Islands (or any other location) to create a heightmap, a normal map, and a color texture and then apply them to a real React Three Fiber scene. We'll also cover using the Sky ...
Fetching Data in React with React Query
Просмотров 2694 года назад
Fetching Data in React with React Query
Build a Skybox in React Three Fiber and Three.js Step by Step
Просмотров 7 тыс.4 года назад
Build a Skybox in React Three Fiber and Three.js Step by Step
Build a Game in React with Recoil and React Three Fiber
Просмотров 8 тыс.4 года назад
Build a Game in React with Recoil and React Three Fiber
React Three Fiber Three Point Lighting Tutorial
Просмотров 8 тыс.4 года назад
React Three Fiber Three Point Lighting Tutorial
Basic Depth First Tree Traversal in Python
Просмотров 4874 года назад
Basic Depth First Tree Traversal in Python
How to Install Node on Windows - Beginners Tutorial
Просмотров 1324 года назад
How to Install Node on Windows - Beginners Tutorial
Create a Discord Bot in 5 Minutes with Discord Bot Starter Kit
Просмотров 4724 года назад
Create a Discord Bot in 5 Minutes with Discord Bot Starter Kit
How do i add reflection to a geometry that already has another material on it?
can you make tutorial for gaussian tour like this? ruclips.net/video/vK5DhbrPAlY/видео.htmlsi=c3WyTYEgrwmdnk0C
this is what i was looking for ! thanks bro!
Thank you very much, I had issue with animations on r3f
really good content. I was wondering how you have used the .mp4 file. Like have you used any loader for that ? because when I try to do the same as you, I am shown an error "You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. ". Hope you can share some idea on it
i own u, you are the best
Great tutorial!
I run stable-diffusion-webui on local, 8G memory is not enough. The program will throw error on limited memory. If run the stable-diffusion on AWS, the instance price is a little higher for me...😅
Does that still work? I think those amis doesn't work with g family instance types anymore.
Is it possible to display the current position during the animation? For example, if I want to manually set the angle by which the arm should be rotated. For example to manually change the rotation angle of the bon (arm) which i created in blender.
Your tutorial is really useful, but unfortunately the Depth Estimation Model (MiDAS) has a runtime error, so I couldn't proceed with the video :(
Thanks for this video.. exactly the insights I needed for my newb skill level.
Great Vedio
How do i stop the animation once its played once
I am not able to export the model correctly , after export it only show black or white circle, tried to join them together but nothing works. its been 2 days please help, i have to submit project
cool brother i really love it❣
I can not use RUclips videos as videoTexture because of CORS. Have you made one using RUclips video?
The reddit post in the description links to a couple things that no longer exist lol
For anyone getting error after running python script, try edit environments.yaml, "diffusers" --> "diffusers==0.12.1", then "run conda env update -f environment.yaml"
Thx
hey, why is the displayed image much darker than the original provided image? Any idea?
Thanks for the comment, it made me realize that the image texture samples need to be mapped to the correct color space in the shader by using a function like this. vec4 linearTosRGB( in vec4 value ) { return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.a ); } You just need to add that to the shader, then call it on the output. gl_FragColor = linearTosRGB(original); I added it to the Code Sandbox if you want to see it in place.
@@CodeWorkshops blows my mind. Thanks for replying, much appreciated!
Great content Code Workshop, keep up the good work.
incredible content
Well done mate!
This is crazy. But the effect is a bit disturbing.
This was so fun to follow along with! I'm still just getting started with ThreeJS in general, but this video helped me better understand how I can approach an idea I had in mind. I also just had fun throwing the cubes and sphere around in the sandbox lol. Thanks a lot for this video!
Thank you!
wouldnt it be better to have an array of x,y,z in useState vs 3 states?
I think you're right it's a bit more readable and less repetitive to store the entire coordinate in one state object, I guess I just chose to split them up for this demo to keep it really simple.
Have you tried working with the webUI? There is an article showing a really easy way to get it going with just one cloud formation script. It worked perfectly for me last week, but it isn't working for me this week. I tried trouble shooting it with no luck so far, but you still might find it useful. Just search online for "Create Your Own Stable Diffusion UI on AWS in Minutes"
can we sync touch scroll and 3D character walk animation ? using react 3 Fiber
Hi Thx so much this, i really appreciate it. i want to deploy a Dreambooth on AWS EC2 and use it as API (fetch data, request , response) and i don't know how to do it, if you can help me with this problem i will appreciate it
Just a massive ton of love for you, thank you for simplifying this process. My own use is not so gargantuan but yay you explained that too, well done.
So I used this code to do a build but all the builds uploaded to services, besides local or code sandbox just keeps the character in T-pose. There might be an issue here in the library when moving this style of animations to an app service.
Love your videos! I am a complete beginner when it comes to programming, the most I ever do is run pandas for basic data analysis and data cleaning for work, but Stable Diffusion and even this project you made has motivated me to learn more. As such, I had a direction-guiding question to ask you: If I want to run that UI that shows up at 2:21 on a cloud instance like AWS EC2, what specific subjects should I learn? This is a very long-term project for me, so I see myself learning daily for 6-18months to be able to do the above, so please, the more suggestions the better.
Thanks for awesome video, I couldn't understand that part 37.37s, you are saying that since previosAction is empty first but we are passing action prop, how it will be empty at the beginning ? there is an action value which comes from useState("RunForward") at App.js
This is cool! I've never used post processing effects for web design but will definitely be having a tinker with this! Nice video :)
awesome! I just generated an ocean floor out of a noise texture for my glowing jellyfish
Very helpful content. I appreciate your efforts @CodeWorkshop
if u can just deploy automatic1111 webui then it will be a lot easier to compare and analyse results. or try metaflow
Another tip is that you could do all the setup work using something like an m5.large (t2/t3 instances have lower network bandwidth), and then stop the instance and then change the instance size to the big GPU instance. Saves a little money if it takes time to set up the instance. Then you can stop the instance when you're not using it, and then start it up again with everything already set up. You'll have to pay for disk space while the instance is stopped which is only 10 cents/GB per month.
Crazy how much more efficient this has gotten since making the video
Yeah it's pretty crazy. The best way to do this is very very far from what's covered in this video now. I hope it's still handy for people who want to see how to set up a GPU instance, but this is not a good way to actually run SD for inferences.
in what respect?
@@stevecastle1730 Wait so what's the better way of doing this? Know a video or tutorial?
could you point in the right direction? :)
awesome tutorial thank you so much 🤟
THANK YOU FOR THIS !!!! I was strugling with getting a CubeCamera setup and found this video that helped me , Thank you
Interesting video. How long does it take to generate a standard image on g5.48xlarge?
Theatrejs wil help dramatically with animating in a UI attached to your react three fiber project.
joli fuckig chit te amo
hey! great channel! thanks a lot! but/and please increase the font size of your/the IDE/vsCode (insist in saying please), thanks in advance. dare to ask, even further, to hide side bar while not using it since it (only) takes a stroke of a key (ctrl+B) to toggle it's visibility (insist in thanking in advance), would say it's a not-hurting nice improvement in accesibility wise. cheers: continue with great work, great content: react-three-fiber being highlight.
Thank you for the feedback. I will work on fixing this.
i can't play the animation..it throws an error "Cannot read properties of undefined (reading 'play')"..any help?
Thanks for this
It's a good tutorial on how to do this on AWS, but given the title I was kinda expecting you to do a little more with all that power. My own 3070Ti can do everything you did here in reasonable time with 8 GB of VRAM (and a bit of fiddeling with script parameters). With that amount of power you could for instance do massive batch sizes (to hopefully speed up generation) or create larger images or something.
Very fair point. My reason for setting up this instance is to experiment with doing some fine tuning training with specialized image sets, and also to see if I can modify one of the mainstream SD web UIs to do concurrent inpainting and outpainting so you can kind of do multiple actions in parallel while you work on an image. I realized I was already at 30 minutes on this video before I even got to thinking about how to make that work, which definitely results in a pretty anti-climactic ending to this video. Hopefully I can come up with something a little more unique and interesting to do another video on soon.