<?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: mix</title>
    <description>The latest articles on DEV Community by mix (@mixcbaea5).</description>
    <link>https://dev.to/mixcbaea5</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%2F3375010%2F421a7cec-4863-4696-b32b-9d2bde8f12dc.jpg</url>
      <title>DEV Community: mix</title>
      <link>https://dev.to/mixcbaea5</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/mixcbaea5"/>
    <language>en</language>
    <item>
      <title>We Built a Live Face Swap Preview in the Browser</title>
      <dc:creator>mix</dc:creator>
      <pubDate>Sun, 12 Jul 2026 14:17:58 +0000</pubDate>
      <link>https://dev.to/mixcbaea5/we-built-a-live-face-swap-preview-in-the-browser-jn9</link>
      <guid>https://dev.to/mixcbaea5/we-built-a-live-face-swap-preview-in-the-browser-jn9</guid>
      <description>&lt;p&gt;We built Vivify's Live Face Swap to transform a webcam feed while the session is running.&lt;/p&gt;

&lt;p&gt;Unlike an upload-and-wait face swap, it responds to movement and expression in the browser. The most interesting work was keeping access short-lived, metering an open-ended session, and deciding what the first release should not do.&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%2F6wtlg9rqwxk7onfe5jdl.jpg" 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%2F6wtlg9rqwxk7onfe5jdl.jpg" alt="Vivify live face swap browser preview showing camera input and AI output side by side" width="800" height="502"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What you can try in the browser
&lt;/h2&gt;

&lt;p&gt;Upload a reference image and press Start. The transformed stream appears beside the camera feed, so movement and expression are visible without rendering a clip first.&lt;/p&gt;

&lt;h2&gt;
  
  
  Two design challenges
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Session access:&lt;/strong&gt; the server issues a short-lived credential when the preview starts, keeping the reusable provider key off the client.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Open-ended usage:&lt;/strong&gt; unlike a normal generation job, a live session has no fixed duration. We meter active time with heartbeats, settle the final partial segment when it ends, and show usage while it runs.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Where the first release stops
&lt;/h2&gt;

&lt;p&gt;The browser version is preview-only: it does not record, export, or save the transformed stream. We also ask users to use only their own face or images they have permission to use.&lt;/p&gt;

&lt;p&gt;Try &lt;a href="https://vivify.video/realtime-face-swap" rel="noopener noreferrer"&gt;live face swap browser preview&lt;/a&gt; on Vivify. What would you test first: identity consistency, latency, expression preservation, or recovery after occlusion?&lt;/p&gt;

</description>
      <category>livefaceswap</category>
      <category>faceswap</category>
      <category>ai</category>
      <category>webdev</category>
    </item>
    <item>
      <title>I Tried Adding Image OCR to a Morse Code Translator</title>
      <dc:creator>mix</dc:creator>
      <pubDate>Wed, 13 May 2026 07:03:58 +0000</pubDate>
      <link>https://dev.to/mixcbaea5/i-tried-adding-image-ocr-to-a-morse-code-translator-4c2e</link>
      <guid>https://dev.to/mixcbaea5/i-tried-adding-image-ocr-to-a-morse-code-translator-4c2e</guid>
      <description>&lt;p&gt;I thought adding image support to a &lt;strong&gt;morse code translator&lt;/strong&gt; would be straightforward.&lt;/p&gt;

&lt;p&gt;Text Morse is deterministic enough: split the dots and dashes into groups, map the groups to letters, then handle spaces between words. An image felt like the same pipeline with OCR in front of it.&lt;/p&gt;

&lt;p&gt;That assumption broke as soon as I looked at real inputs.&lt;/p&gt;

&lt;p&gt;Screenshots get compressed. Photos are tilted. Scans have uneven lighting. Dots and dashes may be visible to a human, but the spacing between them is often too fuzzy for a tool to trust.&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%2Ftracghcc8u8ic6in6dv8.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%2Ftracghcc8u8ic6in6dv8.png" alt="Morse Coder image decoder upload and recognition workflow" width="800" height="453"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The first attempt: clean the image
&lt;/h2&gt;

&lt;p&gt;The obvious first step was preprocessing.&lt;/p&gt;

&lt;p&gt;I tried the usual OCR cleanup ideas:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;convert the image to black and white&lt;/li&gt;
&lt;li&gt;increase contrast&lt;/li&gt;
&lt;li&gt;crop around the Morse area&lt;/li&gt;
&lt;li&gt;reduce noise&lt;/li&gt;
&lt;li&gt;handle slight rotation or skew&lt;/li&gt;
&lt;li&gt;make the marks easier for OCR to see&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These steps help in some cases. They are also dangerous.&lt;/p&gt;

&lt;p&gt;Morse code is not just “visible marks.” The gaps are part of the data. If preprocessing makes a dot too thick, removes a faint dash, or merges two spaces, the final decoded text can change.&lt;/p&gt;

&lt;p&gt;That was the first useful lesson: a cleaner-looking image is not always a more faithful Morse image.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why general OCR is a poor fit
&lt;/h2&gt;

&lt;p&gt;Most OCR tools are designed around letters, words, and lines of text.&lt;/p&gt;

&lt;p&gt;Morse code is closer to a timing or segmentation problem. The tool needs to preserve:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;short marks&lt;/li&gt;
&lt;li&gt;long marks&lt;/li&gt;
&lt;li&gt;gaps inside a character&lt;/li&gt;
&lt;li&gt;gaps between characters&lt;/li&gt;
&lt;li&gt;larger gaps between words&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A human can look at a messy image and infer intent. A tool has to decide from pixels.&lt;/p&gt;

&lt;p&gt;If a photo is taken at an angle, the same visual distance may mean different things across the line. If the image is blurry, a dot may look like noise. If the spacing is inconsistent, the OCR result can look plausible while still being wrong.&lt;/p&gt;

&lt;h2&gt;
  
  
  Browser OCR vs backend recognition
&lt;/h2&gt;

&lt;p&gt;I also tried thinking about where recognition should happen.&lt;/p&gt;

&lt;p&gt;Browser-side OCR is attractive because it feels immediate. The user uploads an image and gets a result without waiting for a backend job. It also keeps the workflow simple.&lt;/p&gt;

&lt;p&gt;Backend OCR or model-based recognition gives more flexibility. You can try heavier models, orientation detection, or multiple passes. But it adds cost, latency, deployment complexity, and another place where the result can become a black box.&lt;/p&gt;

&lt;p&gt;I looked at newer OCR model families too. PaddleOCR and Transformer-based OCR approaches like TrOCR are useful references, especially for messy inputs. But Morse images are not ordinary text images. The model still needs to preserve dot-dash structure and spacing in a form that a Morse decoder can trust.&lt;/p&gt;

&lt;h2&gt;
  
  
  The current product decision
&lt;/h2&gt;

&lt;p&gt;In Morse Coder, I am treating image decoding as an assisted workflow instead of a magic button.&lt;/p&gt;

&lt;p&gt;The current direction is:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Let the user upload an image.&lt;/li&gt;
&lt;li&gt;Try to extract the Morse pattern automatically.&lt;/li&gt;
&lt;li&gt;Use AI-assisted recognition when normal OCR struggles.&lt;/li&gt;
&lt;li&gt;Keep manual Morse input available.&lt;/li&gt;
&lt;li&gt;Let the user inspect or correct the extracted Morse before trusting the decoded text.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;That manual correction step is not just a fallback. It is part of the design.&lt;/p&gt;

&lt;p&gt;If the tool jumps straight from image to final text, the user has no way to know whether an error came from image cleanup, mark detection, spacing, or Morse translation. Showing the intermediate Morse layer gives the user something concrete to repair.&lt;/p&gt;

&lt;p&gt;You can try the current image workflow in &lt;a href="https://morse-coder.com/decoders/decode-image" rel="noopener noreferrer"&gt;Morse Coder&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  The open question
&lt;/h2&gt;

&lt;p&gt;The part I am still unsure about is how much the tool should guess.&lt;/p&gt;

&lt;p&gt;For puzzle users, a good guess may be enough. For historical material, learning material, or classroom use, inspecting the Morse layer may matter more.&lt;/p&gt;

&lt;p&gt;Right now I am leaning toward a hybrid: automate what is safe, expose the intermediate result, and make correction easy.&lt;/p&gt;

&lt;p&gt;If you have any suggestions for this problem, I’d love to hear them.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>machinelearning</category>
      <category>showdev</category>
      <category>sideprojects</category>
    </item>
  </channel>
</rss>
