https://neural.love/assets/BlogUpscale.0704b420.js

1import{_ as e,aV as t,d as a,s,b as i}from"./index.cfc3ce98.js";import{o,b as n,g as r,r as l,f as h,w as d,a as u,k as c,p as m,i as p}from"./vendor.04fc315d.js";class f{constructor(e){this.THREE=e,this.renderParam={clearColor:6710886,width:window.innerWidth,height:400},this.cameraParam={left:-1,right:1,top:1,bottom:1,near:0,far:-1},this.scene=null,this.camera=null,this.renderer=null,this.geometry=null,this.material=null,this.mesh=null,this.isInitialized=!1}init(){this._setScene(),this._setRender(),this._setCamera(),this.isInitialized=!0}_setScene(){this.scene=new this.THREE.Scene}_setRender(){this.renderer=new this.THREE.WebGLRenderer({canvas:document.getElementById("webgl-canvas")}),this.renderer.setPixelRatio(window.devicePixelRatio),this.renderer.setClearColor(new this.THREE.Color(this.renderParam.clearColor)),this.renderer.setSize(this.renderParam.width,this.renderParam.height)}_setCamera(){this.isInitialized||(this.camera=new this.THREE.OrthographicCamera(this.cameraParam.left,this.cameraParam.right,this.cameraParam.top,this.cameraParam.bottom,this.cameraParam.near,this.cameraParam.far));const e=window.innerWidth;this.camera.aspect=e/400,this.camera.updateProjectionMatrix(),this.renderer.setSize(e,400)}_render(){this.renderer.render(this.scene,this.camera)}onResize(){this._setCamera()}onRaf(){this._render()}}class g{constructor(e,t){this.THREE=t,this.canvas=document.getElementById("webgl-canvas"),this.canvasWidth=this.canvas.width,this.canvasHeight=this.canvas.height,this.uniforms={resolution:{type:"v2",value:[this.canvasWidth,this.canvasHeight]},time:{type:"f",value:0},xScale:{type:"f",value:1},yScale:{type:"f",value:.5},distortion:{type:"f",value:.05}},this.stage=e,this.mesh=null,this.xScale=1,this.yScale=.5,this.distortion=.05}init(){this._setMesh()}_setMesh(){const e=new this.THREE.BufferAttribute(new Float32Array([-1,-1,0,1,-1,0,-1,1,0,1,-1,0,-1,1,0,1,1,0]),3),t=new this.THREE.BufferGeometry;t.setAttribute("position",e);const a=new this.THREE.RawShaderMaterial({vertexShader:"\n  attribute vec3 position;\n\n  void main()\t{\n    gl_Position = vec4(position, 1.0);\n  }\n",fragmentShader:"\n  precision highp float;\n  uniform vec2 resolution;\n  uniform float time;\n  uniform float xScale;\n  uniform float yScale;\n  uniform float distortion;\n\n  void main() {\n    vec2 p = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);\n    \n    float d = length(p) * distortion;\n    \n    float rx = p.x * (1.0 + d);\n    float gx = p.x;\n    float bx = p.x * (1.0 - d);\n\n    float c1 = 0.05;\n\n    float r = c1 / abs(p.y + sin((rx + time) * xScale) * yScale);\n    float g = c1 / abs(p.y + sin((gx + time) * xScale) * yScale);\n    float b = c1 / abs(p.y + sin((bx + time) * xScale) * yScale);\n    \n    gl_FragColor = vec4(r, g, b, 1.0);\n  }\n",uniforms:this.uniforms,side:this.THREE.DoubleSide});this.mesh=new this.THREE.Mesh(t,a),this.stage.scene.add(this.mesh)}_render(){this.uniforms.time.value+=.0062}onRaf(){this._render()}}const w={class:"content-wrapper overflow-hidden"},y=["id"];const v={mixins:[a],components:{Rainbow:e({data:()=>({id:"webgl-canvas"}),async mounted(){const e=await t((()=>import("./three.module.da46d67a.js")),[]),a=new f(e);a.init();const s=new g(a,e);s.init(),window.addEventListener("resize",(()=>{a.onResize()}));const i=()=>{window.requestAnimationFrame((()=>{a.onRaf(),s.onRaf(),i()}))};i()}},[["render",function(e,t,a,s,i,h){return o(),n("div",w,[r("canvas",{id:i.id,class:"canvas"},null,8,y),l(e.$slots,"default",{class:"content"},void 0,!0)])}],["__scopeId","data-v-9d06862e"]]),SideBySide:s},data:()=>({ROUTES:i})},b=e=>(m("data-v-a592cdfb"),e=e(),p(),e),x={class:"blog-wrapper"},k=b((()=>r("h1",{class:"text-light display-3"}," How do the image and video upscale algorithms work? ",-1))),_=b((()=>r("p",{class:"text-light"}," In simple terms ",-1))),I=b((()=>r("p",null," Upscaling and ‘enhancing’ (cue the meme) are well-known terms throughout the internetverse. However, have you ever wondered how upscaling actually happens? When using a video upscaler online you feed in a crappy, low-resolution video or picture, and you get a better quality product in return. It sounds a little like magic, doesn’t it? ",-1))),E=b((()=>r("p",null," However, this isn’t magic. There’s an algorithm that works hard to upscale the quality of your media, and here we’ll tell you, in simple terms, exactly what it does. No hiding behind technical mumbo-jumbo or jargon – just a simple explanation that anyone can understand. ",-1))),R=b((()=>r("h2",{class:"mt-5"}," What is an algorithm? ",-1))),S=b((()=>r("p",null," You’ve probably heard the word thrown about a fair bit – the Google algorithm, the Facebook algorithm, etc. Before we start, we want to make sure we start with an even ground, meaning that everyone here knows what the term ‘algorithm’ means, and what one is supposed to do. ",-1))),T=b((()=>r("p",null," In very simple terms, an algorithm is a process or a set of rules that a computer needs to follow in calculations. This set of rules or instructions is designed for a specific task. ",-1))),A=b((()=>r("p",null,"So the term ‘algorithm’ can be oversimplified into ‘a set of tasks.",-1))),H=b((()=>r("p",null,"Now let’s jump into the meaty part, and talk about upscaling.",-1))),j=b((()=>r("h2",{class:"mt-5"}," How are photos and videos improved? ",-1))),P=b((()=>r("p",null," Let’s take an image, for example. If you have a good-quality image and you compress it or change the resolution so it’s a smaller size, you’ll have a lower quality image. You could also have a low-quality image to start with. Now, you’d think improving the quality would be as simple as upping the resolution, but when you do that, you have an image that’s bigger, but very much the same in terms of quality – blurry and with lack of crisp details. ",-1))),z=b((()=>r("p",null,[r("img",{src:"https://d2zga9r8admji.cloudfront.net/landings/upscale/castle_optim.webp",class:"rounded mt-3",alt:"How are photos and videos improved?"}

1)],-1))),W=b((()=>r("p",null," So, how do you fix the photo’s quality? With some help from artificial intelligence, or AI. At neural.love we’re all AI lovers – and here we’ll tell you one of the many cool things AI can do. ",-1))),q=b((()=>r("h2",{class:"mt-5"}," Building the AI ",-1))),C=b((()=>r("p",null," If you have a crappy image and you want to upscale it with some help from AI, you have a much better chance of getting a better result. When building an AI photo & video upscaler, we first have to teach it where and how to draw pixels. This is a complex process (yawn) that takes a lot of time and effort (yawn), and we won’t bore you with the details (yay!) …unless you want to know, in which case you’ll find a little more info in the next section. Yay for everyone! ",-1))),O=b((()=>r("p",null," The term sounds fancy, doesn’t it? Combined with the term ‘artificial intelligence’, it sounds like we’re basically designing sentient robots. We aren’t, but the process is just as fascinating. It’s a step we need to go through to make our AI capable of understanding where and how to draw in more pixels. ",-1))),B=b((()=>r("p",null," For this process, we use datasets that contain thousands of images or hun

1dreds of hours of video footage. This training process can take around a week, and is completed in many different steps, all of which contain fancy terms like approximation project and network architecture, and it gets worse from there! ",-1))),U=b((()=>r("h2",{class:"mt-5"}," Models ",-1))),F=b((()=>r("p",null," Once the training process is over, we have a number of models that can be used in different cases. For photos and videos, for 3D graphics vs real-life images, and for noisy images, for example. This is why we offer a number of models that you can choose from when using our photo & video upscaler. The results will be better if you choose a suitable model, but in 90% of cases, our default model works perfectly fine. ",-1))),M=b((()=>r("p",null,[r("img",{src:"https://d2zga9r8admji.cloudfront.net/landings/upscale/models.webp",class:"rounded mt-3",alt:"Models"})],-1))),D=b((()=>r("h2",{class:"mt-5"}," Identifying shapes or pixel patterns ",-1))),L=b((()=>r("p",null," Now, let’s suppose the image you fed the AI was that of an apartment building – with some windows, ledges, and a cute little railing in each balcony. At this stage, what the AI does is isolate individual shapes from your original image – for example a square window, a railing with right angles, or the irregularly shaped clouds – and compares them to images or video footage in an attempt to find pixel patterns that look kind of similar. This is more complex than it sounds! ",-1))),N=b((()=>r("p",null,[r("img",{src:"https://d2zga9r8admji.cloudfront.net/landings/upscale/region.webp",class:"rounded mt-3",alt:"Identifying shapes or pixel patterns"})],-1))),G=b((()=>r("h2",{class:"mt-5"}," Drawing in more pixels ",-1))),Y=b((()=>r("p",null," After that, the AI uses the pixel patterns it has to draw pixels in certain places, and therefore add to the number of pixels in the image. This results in a clearer, sharper looking image. The resulting image or video also has more detail – for instance, trees have leaves, buildings have noticeable edges, and if it’s a selfie, you should be able to see individual hair strands. It’s a little like putting on glasses for the first time. ",-1))),V=b((()=>r("h2",{class:"mt-5"}," Using an AI video enhancer ",-1))),J=b((()=>r("p",null," When you try to upscale a video online, something similar happens, but many, many times over because each frame is an image in itself. The result is shockingly good – you can get an idea of what to expect if you look at our Home page. ",-1))),Z=b((()=>r("p",{style:{padding:"56.25% 0 0 0",position:"relative"},class:"mt-3"},[r("video",{style:{position:"absolute",top:"0",left:"0",width:"100%",height:"100%"},class:"rounded mb-5 video",src:"https://d2zga9r8admji.cloudfront.net/landings/upscale/upscale_example.mp4",autoplay:"",loop:"",playsinline:"",muted:""})],-1))),$=b((()=>r("h2",{class:"mt-5"}," AI ethics ",-1))),K=b((()=>r("p",null," For those who are curious about what AI is and what it does, here’s a quick summary: AI or artificial intelligence, if oversimplified, means the ability of a computer program or a machine to think and learn. This field of study aims to make computers smart, so they can work on their own without needing commands from humans. Think of it as a step between computers and robots. ",-1))),Q=b((()=>r("p",null," Here’s something else you should know about – our R&D department uses a set of rules and practices called the Ethical AI approach. These practices are responsible for delivering unbiased models that are trained and tested on real life usage cases. We use mixed datasets with people of different approaches, for example, to avoid bias. We also have practices that help us detect bias in complicated cases. We wouldn’t say that our models are completely and utterly unbiased, but they are 99% unbiased. ",-1))),X=b((()=>r("h2",{class:"mt-5"}," TL;DR ",-1))),ee=b((()=>r("p",null,"We do Zoom & Enhance like this:",-1))),te=b((()=>r("h2",{class:"mt-5"}," Try it out yourself with neural.love! ",-1))),ae=b((()=>r("p",null," Have an image or video that you’d like a better version of? Give us a try! Upload your video, and we’ll upscale it for you. neural.love offers an excellent photo & video enhancer online that everyone can use to get their media enhanced and improved quality-wise. Just visit our website and upload your media to the relevant page, and sit back and watch the magic happen. If you concentrate, you can almost hear the Harry Potter theme music playing, it’s so magical. ",-1))),se={class:"d-flex justify-content-center mt-5 mb-6"},ie=b((()=>r("span",{class:"hidden-at-mobile"}," and enhance your",-1))),oe=b((()=>r("span",{class:"hidden-at-mobile"}," now",-1)));const ne=e(v,[["render",function(e,t,a,s,i,l){const m=u("Slim"),p=u("Rainbow"),f=u("SideBySide"),g=u("router-link");return o(),n("div",x,[h(p,{class:"rainbow rounded"},{default:d((()=>[h(m,{class:"blog-header mx-auto px-3"},{default:d((()=>[k,_])),_:1})])),_:1}),h(m,{class:"blog-page mx-auto"},{default:d((()=>[I,E,h(f,{left:"https://d2zga9r8admji.cloudfront.net/landings/upscale/kitty_smol.webp",right:"https://d2zga9r8admji.cloudfront.net/landings/upscale/kitty_x4.webp",withLabels:!0,disclaimer:"Real results",class:"overflow-hidden rounded mt-5"}),R,S,T,A,H,j,P,z,W,q,C,O,B,U,F,M,D,L,N,G,Y,V,J,Z,r("p",null,[c(" So, this is the process through which our fancy AI upscales your photos and videos. It’s a complex process, but our AI does it quickly, and leaves you with a result that you’re bound to be happy with. We have worked on this system for a long time, and very proud of our work. To learn more about the product, click "),h(g,{to:{name:i.ROUTES.PROCESS_VIDEO}},{default:d((()=>[c(" here ")])),_:1},8,["to"]),c(". ")]),$,K,Q,X,ee,h(f,{left:"https://d2zga9r8admji.cloudfront.net/landings/upscale/neo_x1.webp",right:"https://d2zga9r8admji.cloudfront.net/landings/upscale/neo_x4.webp",withLabels:!0,disclaimer:"Real results",class:"overflow-hidden rounded mt-3"}),te,ae,r("div",se,[h(g,{to:{name:i.ROUTES.MAIN},class:"btn btn-primary btn-lg"},{default:d((()=>[c(" Upload"),ie,c(" video or image"),oe])),_:1},8,["to"])]),r("p",null,[c(" You can read more about our company and our product "),h(g,{to:{name:i.ROUTES.ABOUT}},{default:d((()=>[c(" here ")])),_:1},8,["to"]),c(". ")])])),_:1})])}],["__scopeId","data-v-a592cdfb"]]);export{ne as default};