Code Workshop
Code Workshop
  • Видео 23
  • Просмотров 139 785
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...
Просмотров: 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
How to Make Pure CSS Pixel Art
Просмотров 7 тыс.4 года назад
How to Make Pure CSS Pixel Art
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

Комментарии

  • @blossomdoom7609
    @blossomdoom7609 4 месяца назад

    How do i add reflection to a geometry that already has another material on it?

  • @panonesia
    @panonesia 6 месяцев назад

    can you make tutorial for gaussian tour like this? ruclips.net/video/vK5DhbrPAlY/видео.htmlsi=c3WyTYEgrwmdnk0C

  • @aadarshgupta6800
    @aadarshgupta6800 6 месяцев назад

    this is what i was looking for ! thanks bro!

  • @shettyshashank
    @shettyshashank 8 месяцев назад

    Thank you very much, I had issue with animations on r3f

  • @GMaq496
    @GMaq496 9 месяцев назад

    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

  • @trungtrung2248
    @trungtrung2248 10 месяцев назад

    i own u, you are the best

  • @hamitaksln
    @hamitaksln 11 месяцев назад

    Great tutorial!

  • @tongzhao1207
    @tongzhao1207 Год назад

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

  • @merts.6650
    @merts.6650 Год назад

    Does that still work? I think those amis doesn't work with g family instance types anymore.

  • @tinabremer9544
    @tinabremer9544 Год назад

    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.

  • @roniyerushalmi2765
    @roniyerushalmi2765 Год назад

    Your tutorial is really useful, but unfortunately the Depth Estimation Model (MiDAS) has a runtime error, so I couldn't proceed with the video :(

  • @alpaykasal2902
    @alpaykasal2902 Год назад

    Thanks for this video.. exactly the insights I needed for my newb skill level.

  • @FarhanAhmed1360
    @FarhanAhmed1360 Год назад

    Great Vedio

  • @matthewe.proteau6100
    @matthewe.proteau6100 Год назад

    How do i stop the animation once its played once

  • @iamzeeshankarim
    @iamzeeshankarim Год назад

    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

  • @hiteshmakwana9627
    @hiteshmakwana9627 Год назад

    cool brother i really love it❣

  • @richardramirez5746
    @richardramirez5746 Год назад

    I can not use RUclips videos as videoTexture because of CORS. Have you made one using RUclips video?

  • @yahdood6015
    @yahdood6015 Год назад

    The reddit post in the description links to a couple things that no longer exist lol

  • @venojakomin1860
    @venojakomin1860 Год назад

    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"

  • @zenbauhaus1345
    @zenbauhaus1345 Год назад

    Thx

  • @marcinwenger5048
    @marcinwenger5048 Год назад

    hey, why is the displayed image much darker than the original provided image? Any idea?

    • @CodeWorkshops
      @CodeWorkshops Год назад

      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.

    • @marcinwenger5048
      @marcinwenger5048 Год назад

      @@CodeWorkshops blows my mind. Thanks for replying, much appreciated!

  • @ajagaabdulbasit
    @ajagaabdulbasit Год назад

    Great content Code Workshop, keep up the good work.

  • @huntersevenz485
    @huntersevenz485 Год назад

    incredible content

  • @arnaudlelong2342
    @arnaudlelong2342 Год назад

    Well done mate!

  • @denizorsel1029
    @denizorsel1029 Год назад

    This is crazy. But the effect is a bit disturbing.

  • @chovbee
    @chovbee Год назад

    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!

  • @jinn0013
    @jinn0013 Год назад

    Thank you!

  • @Adam-oq4xq
    @Adam-oq4xq Год назад

    wouldnt it be better to have an array of x,y,z in useState vs 3 states?

    • @CodeWorkshops
      @CodeWorkshops Год назад

      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.

  • @sightsandsounds3231
    @sightsandsounds3231 Год назад

    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"

  • @moizhassnat2504
    @moizhassnat2504 Год назад

    can we sync touch scroll and 3D character walk animation ? using react 3 Fiber

  • @zakikasmi
    @zakikasmi 2 года назад

    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

  • @theunderdowners
    @theunderdowners 2 года назад

    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.

  • @chillywilson
    @chillywilson 2 года назад

    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.

  • @zhaoziyang-c5h
    @zhaoziyang-c5h 2 года назад

    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.

  • @berkaycirak
    @berkaycirak 2 года назад

    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

  • @kaizooYT
    @kaizooYT 2 года назад

    This is cool! I've never used post processing effects for web design but will definitely be having a tinker with this! Nice video :)

  • @tigerwolf8338
    @tigerwolf8338 2 года назад

    awesome! I just generated an ocean floor out of a noise texture for my glowing jellyfish

  • @KanwaljeetSingh-ml5lc
    @KanwaljeetSingh-ml5lc 2 года назад

    Very helpful content. I appreciate your efforts @CodeWorkshop

  • @OnePunchHeizou
    @OnePunchHeizou 2 года назад

    if u can just deploy automatic1111 webui then it will be a lot easier to compare and analyse results. or try metaflow

  • @itsyourturncom
    @itsyourturncom 2 года назад

    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.

  • @ZEK1NRZ
    @ZEK1NRZ 2 года назад

    Crazy how much more efficient this has gotten since making the video

    • @stevecastle1730
      @stevecastle1730 2 года назад

      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.

    • @SoMahn
      @SoMahn 2 года назад

      in what respect?

    • @David-Codes
      @David-Codes 2 года назад

      @@stevecastle1730 Wait so what's the better way of doing this? Know a video or tutorial?

    • @malcolmreynolds4099
      @malcolmreynolds4099 2 года назад

      could you point in the right direction? :)

  • @laagodfather4435
    @laagodfather4435 2 года назад

    awesome tutorial thank you so much 🤟

  • @zhanezar
    @zhanezar 2 года назад

    THANK YOU FOR THIS !!!! I was strugling with getting a CubeCamera setup and found this video that helped me , Thank you

  • @MrSchweppes
    @MrSchweppes 2 года назад

    Interesting video. How long does it take to generate a standard image on g5.48xlarge?

  • @trebaltek
    @trebaltek 2 года назад

    Theatrejs wil help dramatically with animating in a UI attached to your react three fiber project.

  • @atomauro
    @atomauro 2 года назад

    joli fuckig chit te amo

  • @alvarobyrne
    @alvarobyrne 2 года назад

    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.

    • @CodeWorkshops
      @CodeWorkshops 2 года назад

      Thank you for the feedback. I will work on fixing this.

  • @metacoder4912
    @metacoder4912 2 года назад

    i can't play the animation..it throws an error "Cannot read properties of undefined (reading 'play')"..any help?

  • @qwertclyde1092
    @qwertclyde1092 2 года назад

    Thanks for this

  • @Gerryflap
    @Gerryflap 2 года назад

    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.

    • @CodeWorkshops
      @CodeWorkshops 2 года назад

      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.