feat(new tool): Charset Detector/Decoder

Author: sharevb

package.json

@@ -101,6 +101,7 @@
     "bwip-js": "^4.5.1",
     "byte-data": "^19.0.1",
     "change-case": "^5.4.4",
+    "chardet": "^2.1.0",
     "chatgpt-prompt-splitter": "^1.0.5",
     "chinesegen": "^0.3.3",
     "cidr-tools": "^11.0.3",

pnpm-lock.yaml

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { Buffer } from 'node:buffer';
+import chardet from 'chardet';
+import iconv from 'iconv-lite';
+
+const inputType = ref<'file' | 'content'>('file');
+const fileContent = ref('');
+const fileInput = ref() as Ref<File | null>;
+const error = ref('');
+const contentDecoded = ref('');
+
+async function getUInt8ArrayFromInputs() {
+  const fileContentValue = fileContent.value;
+  const file = fileInput.value;
+  if (inputType.value === 'file' && file) {
+    return new Uint8Array(await file.arrayBuffer());
+  }
+  else if (inputType.value === 'content' && fileContentValue) {
+    const uint8Array = new Uint8Array(fileContentValue.length);
+    for (let i = 0; i < fileContentValue.length; i++) {
+      uint8Array[i] = fileContentValue.charCodeAt(i);
+    }
+    return uint8Array;
+  }
+  else {
+    return null;
+  }
+}
+
+const encodings = computedAsync(async () => {
+  error.value = '';
+  try {
+    const buffer = await getUInt8ArrayFromInputs();
+    if (buffer === null) {
+      return null;
+    }
+    return chardet.analyse(buffer);
+  }
+  catch (e: any) {
+    error.value = e.toString();
+    return null;
+  }
+});
+
+async function generateEncodedOutput(encoding: string) {
+  error.value = '';
+  contentDecoded.value = '';
+  try {
+    const buffer = await getUInt8ArrayFromInputs();
+    if (buffer === null) {
+      return;
+    }
+    contentDecoded.value = iconv.decode(Buffer.from(buffer), encoding);
+  }
+  catch (e: any) {
+    return e.toString();
+  }
+}
+
+function onUpload(file: File) {
+  if (file) {
+    fileInput.value = file;
+  }
+}
+</script>
+
+<template>
+  <div style="max-width: 600px;">
+    <c-card title="Input" mb-2>
+      <n-radio-group v-model:value="inputType" name="radiogroup" mb-2 flex justify-center>
+        <n-space>
+          <n-radio
+            value="file"
+            label="File"
+          />
+          <n-radio
+            value="content"
+            label="Content"
+          />
+        </n-space>
+      </n-radio-group>
+
+      <c-file-upload
+        v-if="inputType === 'file'"
+        title="Drag and drop TXT file here, or click to select a file"
+        @file-upload="onUpload"
+      />
+
+      <c-input-text
+        v-if="inputType === 'content'"
+        v-model:value="fileContent"
+        label="File Content"
+        multiline
+        placeholder="Put your text content here..."
+        rows="15"
+        mb-2
+      />
+    </c-card>
+
+    <c-alert v-if="error">
+      {{ error }}
+    </c-alert>
+
+    <c-card v-if="!error && encodings" title="Possible encodings">
+      <n-table>
+        <thead>
+          <tr>
+            <th scope="col">
+              Confidence
+            </th>
+            <th scope="col">
+              Name
+            </th>
+            <th scope="col">
+              Lang
+            </th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(enc, index) in encodings || []"
+            :key="index"
+          >
+            <td>
+              {{ enc.confidence }}
+            </td>
+            <td>
+              {{ enc.name }}
+            </td>
+            <td>
+              {{ enc.lang }}
+            </td>
+            <td>
+              <n-button @click="generateEncodedOutput(enc.name.toLocaleLowerCase())">
+                Decode
+              </n-button>
+            </td>
+          </tr>
+        </tbody>
+      </n-table>
+
+      <n-card v-if="contentDecoded" title="Decoded text" mb-1>
+        <textarea-copyable :value="contentDecoded" />
+      </n-card>
+    </c-card>
+  </div>
+</template>

src/tools/charset-detector/charset-detector.vue

@@ -0,0 +1,13 @@
+import { FileText } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Text Charset Detector/Decoder',
+  path: '/charset-detector',
+  description: 'Detect text possible charsets and allow to decode using each detected encoding',
+  keywords: ['charset', 'ascii', 'iso', 'utf8', 'unicode', 'encoding', 'decode', 'text', 'detector'],
+  component: () => import('./charset-detector.vue'),
+  icon: FileText,
+  createdAt: new Date('2025-03-09'),
+  category: 'Forensic',
+});