<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Dev Vishwas</title>
    <description>The latest articles on DEV Community by Dev Vishwas (@devishwas).</description>
    <link>https://dev.to/devishwas</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3835542%2F41fbf72c-a32d-4561-9054-ed11bb8b8898.jpeg</url>
      <title>DEV Community: Dev Vishwas</title>
      <link>https://dev.to/devishwas</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/devishwas"/>
    <language>en</language>
    <item>
      <title>Why is Gemini 3.5 Live Translate promising?</title>
      <dc:creator>Dev Vishwas</dc:creator>
      <pubDate>Sat, 27 Jun 2026 03:37:19 +0000</pubDate>
      <link>https://dev.to/devishwas/why-is-gemini-35-live-translate-promising-217c</link>
      <guid>https://dev.to/devishwas/why-is-gemini-35-live-translate-promising-217c</guid>
      <description>&lt;p&gt;Got to attend the Gemini 3.5 Live Translate AMA @ Discord. I summarised some points and want to discuss about it.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fevbjbar12yj5mnje0y6m.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fevbjbar12yj5mnje0y6m.png" alt=" " width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Google DeepMind ran an exclusive Discord AMA for Gemini 3.5 Live Translate with Anuda Weerasinghe (Associate PM) and Thor Schaeff (DevRel Engineer). 74 people in the room. I was one of them.&lt;/p&gt;

&lt;p&gt;This wasn't a product demo or a launch recap. It was an hour of engineers actually explaining architecture decisions, tradeoffs, and constraints. That's rare. So here's a full technical breakdown of everything worth knowing from it.&lt;/p&gt;

&lt;h2&gt;
  
  
  First, what even is Gemini 3.5 Live Translate?
&lt;/h2&gt;

&lt;p&gt;The short version: it's a streaming speech-to-speech translation model that supports 70+ languages and generates translated audio in near real-time, a few seconds behind the speaker.&lt;/p&gt;

&lt;p&gt;The part people gloss over: it's built on Gemini 3 Pro, not a lightweight translation model. That matters because the quality ceiling is much higher than what you'd get from a dedicated translation pipeline slapped onto a TTS layer.&lt;/p&gt;

&lt;p&gt;It rolled out on June 9, 2026 across three surfaces: the Gemini Live API for developers, Google Meet for enterprise (private preview), and Google Translate on Android and iOS for everyone else.&lt;/p&gt;

&lt;h2&gt;
  
  
  It's not text in the middle.
&lt;/h2&gt;

&lt;p&gt;Most translation systems work in a chain: speech to text, text translated, text back to speech. That chain introduces latency at every step, and each conversion is a place where meaning can degrade.&lt;/p&gt;

&lt;p&gt;Gemini 3.5 Live Translate skips the middle entirely. It's audio in, audio out. The model takes streamed audio and generates translated audio directly, without converting to text as an intermediate representation.&lt;/p&gt;

&lt;p&gt;The API enforces this at the format level. Both input and output have to be raw 16-bit PCM data. No MP3, no compressed formats. They're deliberately keeping the pipeline lean for latency reasons, and if you're building on it, that's a constraint to know upfront. Your audio capture code needs to output raw PCM, and whatever you're playing back needs to handle it.&lt;/p&gt;

&lt;p&gt;If you need text, you can still get it. But it comes from a separate transcription layer, not from the audio model itself. The native audio model only returns audio.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F23nz4tf8xmgztggcq5pn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F23nz4tf8xmgztggcq5pn.png" alt=" " width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The thinkingLevel parameter is basically a latency knob.
&lt;/h2&gt;

&lt;p&gt;The model has a thinkingLevel parameter that controls how much reasoning it does before responding. At minimal, it skips chain-of-thought entirely and outputs translated speech as fast as possible. Crank it up and you get more deliberate, accurate translations, but you pay for it in latency.&lt;/p&gt;

&lt;p&gt;For live conversation, you almost always want minimal. The whole point of real-time translation is that the lag is small enough that conversation still feels natural. Adding deliberate reasoning time defeats that.&lt;/p&gt;

&lt;p&gt;What I found interesting is how server events work. One event can contain audio, text, and metadata simultaneously. They arrive bundled, not sequentially. That means your client doesn't have to coordinate waiting for different pieces to come in one after another.&lt;/p&gt;

&lt;p&gt;There's also a concept called send_client_content worth understanding. It lets you front-load conversation history at the start of a session. But once the session goes active, that door closes. You can't inject context mid-session. So if you're building something where prior conversation matters, set it up before the first turn starts.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flc0xmejiv3h2294j4pbr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Flc0xmejiv3h2294j4pbr.png" alt=" " width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  I asked Anuda directly about context degradation.
&lt;/h2&gt;

&lt;p&gt;This was the question I wanted answered. Long-running sessions are where translation systems quietly fall apart, and most product demos never show you an hour-long call.&lt;/p&gt;

&lt;p&gt;My question to Anuda: does translation quality degrade over a long session as earlier context is lost? Is there a context window limit on the stream?&lt;/p&gt;

&lt;p&gt;His answer: context is retained throughout the session and you shouldn't see quality drops. The live API has a 32k token context window. The native model gets 128k, but the live API variant runs at 32k. Sessions are capped at 10 minutes, but session management APIs let you extend beyond that. Voice consistency is still an area they're actively working on.&lt;/p&gt;

&lt;p&gt;The 32k vs 128k split is the thing to note here. If you're building something like a multilingual lecture tool or a long customer support call, you're working within 32k tokens. For most live conversations that's probably fine, but it's worth understanding before you hit an edge case.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fcb6ywuixgdhhtncpb7y4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fcb6ywuixgdhhtncpb7y4.png" alt=" " width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The language switching is actually clean.
&lt;/h2&gt;

&lt;p&gt;This was one of the most practically impressive things they talked about. No flags, no session resets, no manual configuration. The model detects language shifts directly from the audio stream and follows along.&lt;/p&gt;

&lt;p&gt;If someone switches from Tamil to English mid-sentence, the translation adapts. It works on both incoming and outgoing speech. 70+ languages supported, and the full list includes languages like Bengali, Malayalam, Marathi, Burmese, Basque, and Mongolian, not just the usual high-resource set.&lt;/p&gt;

&lt;p&gt;2000+ language pair combinations is the claim. That number comes from the combinatorics of the supported languages, and whether all of those pairs are equally well-evaluated is a fair question to ask. But the mid-conversation switching working without any manual input is genuinely useful, especially for multilingual teams where people naturally shift languages mid-call.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F6ftialq4ps107wwlm11l.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F6ftialq4ps107wwlm11l.png" alt=" " width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The video input is not what you think.
&lt;/h2&gt;

&lt;p&gt;The API accepts video, but it's not a video call in any conventional sense. Frames are sent as individual JPEGs or PNGs via real-time inputs, and you're capped at one frame per second. It's frame-by-frame visual context, not a video stream.&lt;/p&gt;

&lt;p&gt;Think of it less like a webcam feed and more like periodically telling the model what the environment looks like. Useful for grounding the translation in visual context, but if you're expecting the model to track motion or read fast-moving text on screen, that's not what this is.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F1l89hj04vo68la4cz5yd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F1l89hj04vo68la4cz5yd.png" alt=" " width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The architecture they walked through.
&lt;/h2&gt;

&lt;p&gt;The reference implementation uses LiveKit, and the flow is clean enough to be worth understanding.&lt;/p&gt;

&lt;p&gt;The organizer publishes audio to a LiveKit room. A TranslationBridge bot joins the room per target language, subscribes to the organizer's audio, and sends it to the Gemini Live API with a translationConfig specifying directional translation and a targetLanguageCode. The model returns translated audio, which the bridge publishes back into the LiveKit room. Attendees then subscribe to a translator-{lang} audio track for whatever language they need.&lt;/p&gt;

&lt;p&gt;The nice thing about this design is the separation. Each language gets its own bot. The core call infrastructure doesn't need to know anything about translation. You're just routing audio tracks. It's composable and relatively easy to extend.&lt;/p&gt;

&lt;p&gt;The Gemini 3.5 Live Translate Docs:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://ai.google.dev/gemini-api/docs/live-api/live-translate" rel="noopener noreferrer"&gt;Docs&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The AMA was one of the more technically honest ones I've attended. Anuda and Thor explained real constraints, real tradeoffs, and architecture that you can actually implement. The raw PCM requirement and the 10-minute session cap are the two things to design around first. Everything else flows from those.&lt;/p&gt;

&lt;p&gt;If you're building on the Gemini Live API, the reference LiveKit architecture is a solid starting point. And if you're just following the space, the audio-to-audio shift without a text intermediate is the architectural detail that actually matters here.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>[Boost]</title>
      <dc:creator>Dev Vishwas</dc:creator>
      <pubDate>Tue, 16 Jun 2026 16:18:13 +0000</pubDate>
      <link>https://dev.to/devishwas/-32di</link>
      <guid>https://dev.to/devishwas/-32di</guid>
      <description>&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/googleai/build-a-realtime-translation-app-with-gemini-live-api-livekit-google-cloud-run-5474" class="crayons-story__hidden-navigation-link"&gt;Build a Realtime Translation App with Gemini Live API, LiveKit, &amp;amp; Google Cloud Run&lt;/a&gt;
    &lt;div class="crayons-article__cover crayons-article__cover__image__feed"&gt;
      &lt;iframe src="https://www.youtube.com/embed/TNwKs39uSVk" title="Build a Realtime Translation App with Gemini Live API, LiveKit, &amp;amp; Google Cloud Run"&gt;&lt;/iframe&gt;
    &lt;/div&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;
          &lt;a class="crayons-logo crayons-logo--l" href="/googleai"&gt;
            &lt;img alt="Google AI logo" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F11026%2F386b14d3-cc9a-4270-aba0-3e41cdfb9d85.jpg" class="crayons-logo__image" width="400" height="400"&gt;
          &lt;/a&gt;

          &lt;a href="/thorwebdev" class="crayons-avatar  crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F83859%2F94bfc188-6624-4f27-8417-9166897ea620.jpeg" alt="thorwebdev profile" class="crayons-avatar__image" width="800" height="1096"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/thorwebdev" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Thor 雷神 Schaeff
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Thor 雷神 Schaeff
                
              
              &lt;div id="story-author-preview-content-3856985" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/thorwebdev" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F83859%2F94bfc188-6624-4f27-8417-9166897ea620.jpeg" class="crayons-avatar__image" alt="" width="800" height="1096"&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Thor 雷神 Schaeff&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

            &lt;span&gt;
              &lt;span class="crayons-story__tertiary fw-normal"&gt; for &lt;/span&gt;&lt;a href="/googleai" class="crayons-story__secondary fw-medium"&gt;Google AI&lt;/a&gt;
            &lt;/span&gt;
          &lt;/div&gt;
          &lt;a href="https://dev.to/googleai/build-a-realtime-translation-app-with-gemini-live-api-livekit-google-cloud-run-5474" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Jun 9&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/googleai/build-a-realtime-translation-app-with-gemini-live-api-livekit-google-cloud-run-5474" id="article-link-3856985"&gt;
          Build a Realtime Translation App with Gemini Live API, LiveKit, &amp;amp; Google Cloud Run
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/ai"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;ai&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/gemini"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;gemini&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/nextjs"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;nextjs&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/tutorial"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;tutorial&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/googleai/build-a-realtime-translation-app-with-gemini-live-api-livekit-google-cloud-run-5474" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="24" height="24"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;35&lt;span class="hidden s:inline"&gt;&amp;nbsp;reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/googleai/build-a-realtime-translation-app-with-gemini-live-api-livekit-google-cloud-run-5474#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              

              3&lt;span class="hidden s:inline"&gt;&amp;nbsp;comments&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            5 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial crayons-icon c-btn__icon"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success crayons-icon c-btn__icon"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


</description>
    </item>
    <item>
      <title>Moyacchi ; Your AI Eco Companion</title>
      <dc:creator>Dev Vishwas</dc:creator>
      <pubDate>Sun, 19 Apr 2026 22:43:17 +0000</pubDate>
      <link>https://dev.to/devishwas/moyacchi-your-ai-eco-companion-487n</link>
      <guid>https://dev.to/devishwas/moyacchi-your-ai-eco-companion-487n</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for &lt;a href="https://dev.to/challenges/weekend-2026-04-16"&gt;Weekend Challenge: Earth Day Edition&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;This is a submission for Weekend Challenge: Earth Day Edition&lt;/p&gt;

&lt;h1&gt;
  
  
  What I Built
&lt;/h1&gt;

&lt;p&gt;Most people have no idea what their daily choices are actually doing to the environment. Not because they don’t care ; but because nothing makes it visible, personal, or worth coming back to.&lt;/p&gt;

&lt;p&gt;Moyacchi is my answer to that. It is an AI-powered eco companion that tracks your daily habits across three dimensions ; transportation, food, and energy use ; analyses their cumulative environmental impact using Google Gemini, and reflects that progress through a companion that literally evolves with you. Seed. Sprout. Bloom. Glow.&lt;/p&gt;

&lt;p&gt;The goal was never to build another carbon calculator. It was to build something that feels alive. Something you actually want to open tomorrow.&lt;/p&gt;

&lt;p&gt;Beyond the core habit loop, Moyacchi includes Green-Sight ; a real-time OCR scanner that reads any product label, flags harmful ingredients, identifies packaging material and waste classification. A conversational AI eco coach. A live air quality dashboard for any city on earth. And a Journal that doubles as a personal environmental diary, with shareable impact cards for every entry.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/y_8WKch14kQ"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;🍏 &lt;a href="https://moyacchi.vercel.app" rel="noopener noreferrer"&gt;Live Demo ; moyacchi.vercel.app&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Code
&lt;/h2&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/radmm" rel="noopener noreferrer"&gt;
        radmm
      &lt;/a&gt; / &lt;a href="https://github.com/radmm/Moyacchi" rel="noopener noreferrer"&gt;
        Moyacchi
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Moyacchi AI Eco Companion - Submission at Dev.to
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;&lt;div&gt;
&lt;a rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/73b33bccc92c444369363d3ff5b25844c62340eac57331a1545089ab9ecf9b00/68747470733a2f2f63646e2e646973636f72646170702e636f6d2f6174746163686d656e74732f313436333232373232373530373532373737362f313530393430373537333336313832333831352f556e7469746c656434305f32303236303432303033333935372e6a70673f65783d36613139313064382669733d366131376266353826686d3d6331616438323562326465666534643233626133616130313432326134323735353964383431643133383534616638366233333265653433663133333065656126"&gt;&lt;img src="https://camo.githubusercontent.com/73b33bccc92c444369363d3ff5b25844c62340eac57331a1545089ab9ecf9b00/68747470733a2f2f63646e2e646973636f72646170702e636f6d2f6174746163686d656e74732f313436333232373232373530373532373737362f313530393430373537333336313832333831352f556e7469746c656434305f32303236303432303033333935372e6a70673f65783d36613139313064382669733d366131376266353826686d3d6331616438323562326465666534643233626133616130313432326134323735353964383431643133383534616638366233333265653433663133333065656126"&gt;&lt;/a&gt;
&lt;div class="markdown-heading"&gt;
&lt;h3 class="heading-element"&gt;Moyacchi ; Your AI Eco Companion&lt;/h3&gt;
&lt;/div&gt;
&lt;p&gt;Demo: &lt;a href="https://youtu.be/y_8WKch14kQ" rel="nofollow noopener noreferrer"&gt;https://youtu.be/y_8WKch14kQ&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Track your habits. Understand your impact. Grow together.&lt;/strong&gt;&lt;/p&gt;
&lt;/div&gt;

&lt;div class="markdown-heading"&gt;
&lt;h2 class="heading-element"&gt;Features&lt;/h2&gt;
&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;Daily Stack Analysis&lt;/strong&gt;
Log your day across three dimensions ; transportation, food, and energy use. Moyacchi analyses the entire day at once using Google Gemini Flash and returns a score, performance grade, behavioral swaps, and a real-world impact metaphor.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Evolving Companion&lt;/strong&gt;
Moyacchi grows with your progress through four stages ; Seed, Sprout, Bloom, Glow. The better your habits, the more he evolves.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Green-Sight OCR&lt;/strong&gt;
Snap any product label. Moyacchi identifies harmful ingredients, packaging material, waste classification, and disposal guidance in real time.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;AI Eco Coach&lt;/strong&gt;
A conversational AI coach powered by Gemini. Ask anything about sustainable living ; no lectures, no guilt.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Sky Dashboard&lt;/strong&gt;
Live air quality for any city on earth. AQI, six pollutants, pollen levels ; powered by Open-Meteo, completely free and open.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Journal&lt;/strong&gt;
A chronological record of your environmental footprint…&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/radmm/Moyacchi" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;h1&gt;
  
  
  How I Built It
&lt;/h1&gt;

&lt;p&gt;The frontend is React 19 with TypeScript, styled with Tailwind CSS v4. Firebase handles Google authentication and real-time Firestore persistence, with security rules strictly scoping every read and write to the authenticated user. Guest users get full functionality through localStorage with seamless cloud sync on sign in.&lt;/p&gt;

&lt;p&gt;All AI inference runs through Google Gemini Flash. Every model call is structured against a strict JSON schema ; habit analysis, image OCR, chat, and air quality interpretation all return typed, validated, reliable output. No hallucinated formats, no unparseable responses.&lt;/p&gt;

&lt;p&gt;The Sky Dashboard pulls live AQI, pollutant, and pollen data from the Open-Meteo API ; completely free, no key required, globally accurate.&lt;/p&gt;

&lt;p&gt;The mascot is a pure SVG rendered directly in JSX with path morphing and mood animations handled by Framer Motion. No image files. Just code.&lt;br&gt;
The entire application was designed, built, and shipped in one day.&lt;/p&gt;

&lt;h1&gt;
  
  
  Prize Categories
&lt;/h1&gt;

&lt;p&gt;Best Use of Google Gemini ; Gemini Flash powers every intelligent layer of Moyacchi. Habit analysis with structured JSON schemas, Green-Sight OCR for real-time product label scanning, a multi-turn conversational eco coach, and image-based habit identification from photos. Gemini is not a feature ; it is the backbone.&lt;/p&gt;

&lt;p&gt;Built by Dev Vishwas ; &lt;a class="mentioned-user" href="https://dev.to/devishwas"&gt;@devishwas&lt;/a&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>weekendchallenge</category>
    </item>
    <item>
      <title>Building a Quantum ESPRESSO GUI on a Tablet</title>
      <dc:creator>Dev Vishwas</dc:creator>
      <pubDate>Fri, 20 Mar 2026 19:39:14 +0000</pubDate>
      <link>https://dev.to/devishwas/building-a-quantum-espresso-gui-on-a-tablet-336j</link>
      <guid>https://dev.to/devishwas/building-a-quantum-espresso-gui-on-a-tablet-336j</guid>
      <description>&lt;p&gt;So here’s something I didn’t expect to be writing about this semester.&lt;/p&gt;

&lt;p&gt;I’m a first-year CSE student. I do most of my coding practice on a tablet with Google Colab open in the browser. And somehow, over the past few weeks, I ended up building a working simulation of &lt;strong&gt;BURAI 3&lt;/strong&gt;; the GUI for Quantum ESPRESSO, specifically for visualizing the band gap of MoSe2 (Molybdenum Diselenide). A real 2D material being studied for next-gen transistors and solar cells.&lt;/p&gt;

&lt;p&gt;Full disclosure upfront: I referenced published papers, leaned on the Three.js documentation, used AI assistance, and took workflow inspiration from existing GitHub repos. But I understood what went into it, and that’s what I actually want to talk about.&lt;/p&gt;

&lt;p&gt;Because here’s the thing - nobody tells you in first year. Understanding something and building it from scratch are two completely different skills, and both are valid.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiw53a5zfcqq4869xg0j0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiw53a5zfcqq4869xg0j0.png" alt=" " width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Why This Project
&lt;/h1&gt;

&lt;p&gt;My professor mentioned MoSe2 band structure project. Something about how it has a direct band gap in monolayer form but an indirect one in bulk. Didn’t fully get it at the time, but the phrase “indirect-to-direct transition” stuck with me.&lt;/p&gt;

&lt;p&gt;I came back to my dorm, looked it up, fell down a rabbit hole, found Quantum ESPRESSO, then found BURAI 3. Grey interface, teal and yellow atoms, old-school panel on the left. It looked like something a researcher would actually use.&lt;/p&gt;

&lt;p&gt;I thought: can I build something that looks and works like this, but runs in a single Colab cell on a tablet?&lt;br&gt;
Turns out yes. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa3kkx5lr1yla7z7y7ikk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa3kkx5lr1yla7z7y7ikk.png" alt=" " width="799" height="515"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h1&gt;
  
  
  What I Actually Built
&lt;/h1&gt;

&lt;p&gt;Before anything technical, let me be clear about what this is and what it isn’t.&lt;/p&gt;
&lt;h2&gt;
  
  
  What it is:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;A browser-based simulation of the BURAI 3 interface&lt;/li&gt;
&lt;li&gt;A 3D interactive crystal structure viewer using Three.js&lt;/li&gt;
&lt;li&gt;A band structure plot with real published gap values for MoSe2&lt;/li&gt;
&lt;li&gt;Physics controls that actually change the graph (Monolayer/Bulk, PBE/HSE06/GW, SOC on/off)&lt;/li&gt;
&lt;li&gt;Runs entirely in one Google Colab cell&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  What it isn’t:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;A real Quantum ESPRESSO installation running pw.x&lt;/li&gt;
&lt;li&gt;A live DFT calculation (that needs a cluster and hours of runtime)&lt;/li&gt;
&lt;li&gt;Something I could have built entirely on my own at this stage&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That last point matters. I see posts where people oversell what they built and it always feels off. So: built with assistance, understood it, iterated on it, learned a lot.&lt;/p&gt;
&lt;h1&gt;
  
  
  The Physics
&lt;/h1&gt;

&lt;p&gt;Band gap is the energy distance between where electrons normally sit (valence band) and where they need to go to conduct electricity (conduction band). &lt;strong&gt;MoSe2&lt;/strong&gt; sits around &lt;strong&gt;1.44 to 1.55 eV&lt;/strong&gt;, comfortably in semiconductor range.&lt;/p&gt;

&lt;p&gt;The reason the method choice matters is that &lt;strong&gt;PBE&lt;/strong&gt; (the standard DFT approximation) consistently underestimates band gaps by 10 to 30 percent. &lt;strong&gt;HSE06&lt;/strong&gt; corrects for this. &lt;strong&gt;GW&lt;/strong&gt; gets closest to experiment but is expensive to run. The viewer lets you switch between all three and see the difference directly.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd1z8cf35ddn6ebrqdkki.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd1z8cf35ddn6ebrqdkki.png" alt=" " width="799" height="515"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h1&gt;
  
  
  The Prototype - What It Actually Looks Like
&lt;/h1&gt;

&lt;p&gt;When you run the cell, you land on the 3D structure view first. The BURAI orange top bar, the dark tab bar with &lt;em&gt;“Mini Project”&lt;/em&gt; and &lt;em&gt;“mose2_final”&lt;/em&gt; tabs, and the grey viewport with the crystal rotating in front of you. Mo atoms in teal, Se atoms in yellow, bonds connecting them.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F909jrthil0krum2p2m1d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F909jrthil0krum2p2m1d.png" alt=" " width="799" height="515"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The band structure view section; the plot sits in the viewport — red solid bands, orange dashed SOC-split bands, a cyan shaded region marking the gap, and an arrow annotation on the right showing the exact gap value. Below the plot, the k-point labels: Γ M K Γ A.&lt;/p&gt;

&lt;p&gt;The right panel has all the controls. Change any of them and the plot redraws immediately:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Monolayer vs Bulk&lt;/strong&gt; — the band shapes shift, the gap type flips between direct and indirect.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff3o3kag43toczl8rv5dn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff3o3kag43toczl8rv5dn.png" alt=" " width="799" height="515"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;PBE / HSE06 / GW&lt;/strong&gt; — the gap value changes and a note appears at the bottom explaining the accuracy tradeoff for that method.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl02kbc30sohvw3r1mw1d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl02kbc30sohvw3r1mw1d.png" alt=" " width="799" height="515"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flsmlcq8djr0cm7khj501.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flsmlcq8djr0cm7khj501.png" alt=" " width="799" height="515"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;SOC on/off&lt;/strong&gt; — the top valence band visibly splits into two branches when you turn it on.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F31fqcn6xja3490n31aee.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F31fqcn6xja3490n31aee.png" alt=" " width="799" height="515"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Default on load: &lt;strong&gt;Monolayer + HSE06 + SOC ON = 1.55 eV&lt;/strong&gt;. That’s the closest match to the experimental optical gap for monolayer MoSe2.&lt;/p&gt;
&lt;h1&gt;
  
  
  Languages and Tools used
&lt;/h1&gt;

&lt;p&gt;Each language has one job and sticks to it.&lt;br&gt;
Python delivers the whole thing to Colab’s output. All it needs is one call. That’s its entire role here.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;HTML is the structure&lt;/strong&gt; - the window layout, the top bar, the panels, the tabs. Matching BURAI meant getting specific: #cccccc grey, #3a3a3a tab bar, the exact button shapes.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;CSS is purely visual&lt;/strong&gt; - the orange gradient, the old-school inset borders, the toggle states.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;JavaScript&lt;/strong&gt; is where the project actually lives. The 3D viewer, the band plot, all the toggle logic. Switch from PBE to HSE06 and JavaScript catches it, grabs the new value, wipes the canvas, and redraws everything. Feels instant.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Three.js&lt;/strong&gt; handles the 3D crystal. It wraps WebGL (the browser’s 3D engine) into something actually approachable; so you’re placing atoms and setting up lights, along with drag interactions.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;HTML Canvas API&lt;/strong&gt; draws the band structure graph. No library, it’s the browser’s built-in 2D drawing tools. Each line, label, and shaded region on that plot is a direct canvas command.&lt;/p&gt;
&lt;h1&gt;
  
  
  A Bit of Three.js
&lt;/h1&gt;

&lt;p&gt;Here’s what placing an atom in the 3D viewer actually looks like:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjz5clhjpptqi742ks476.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjz5clhjpptqi742ks476.png" alt=" " width="799" height="515"&gt;&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Mo atom — teal sphere at its crystal position&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;moGeometry&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;THREE&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;SphereGeometry&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mf"&gt;0.42&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;32&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;moMaterial&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;THREE&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;MeshPhongMaterial&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mh"&gt;0x22aacc&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;     &lt;span class="c1"&gt;// teal — matches BURAI exactly&lt;/span&gt;
  &lt;span class="na"&gt;shininess&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;90&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;specular&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mh"&gt;0x99ddee&lt;/span&gt;   &lt;span class="c1"&gt;// gives it that shiny lit look&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;moAtom&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;THREE&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Mesh&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;moGeometry&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;moMaterial&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;moAtom&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;position&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;set&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;y&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;z&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// fractional crystal coordinates&lt;/span&gt;
&lt;span class="nx"&gt;scene&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;moAtom&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  Honest Limitations
&lt;/h1&gt;

&lt;p&gt;The gap values come from published literature, not a live calculation. The band shapes are drawn from manually placed coordinates with smoothing. The BURAI interface is a visual simulation.&lt;/p&gt;

&lt;p&gt;The honest pitch: this is an interactive visualization of MoSe2 band structure physics using literature values, built to explore how dimensionality, functional, and SOC choices affect band gap results — in a UI that mirrors real BURAI output.&lt;/p&gt;

&lt;p&gt;For a first-year project, that’s a pretty good starter.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsh309olfsxle8dw8iqvx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsh309olfsxle8dw8iqvx.png" alt=" " width="799" height="515"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  What I Took Away
&lt;/h1&gt;

&lt;p&gt;The band structure is literally just a plot of allowed electron energies against crystal momentum. Once that clicked, the whole subject stopped being intimidating. And HTML, CSS, and JavaScript can build things that look like serious scientific software if you care enough about the details.&lt;/p&gt;

&lt;p&gt;Sources: &lt;em&gt;Liu et al. PRB 88, 085433 (2013) · github.com · threejs.org docs  etc&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Thanks for reading. Corrections welcome.&lt;/p&gt;

&lt;p&gt;Dev Vishwas | First-year B.Tech CSE&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>python</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
