From 6e736cb19b21305fcd35d52cbc4c6a282fc01357 Mon Sep 17 00:00:00 2001
From: sharevb <sharevb@gmail.com>
Date: Sun, 12 Jan 2025 22:31:11 +0100
Subject: [PATCH] feat(new tool): GPT Token Counter

Fix #1334
---
 .../gpt-token-estimator.e2e.spec.ts           | 15 +++++++
 .../gpt-token-estimator.service.test.ts       |  6 +++
 .../gpt-token-estimator.service.ts            |  0
 .../gpt-token-estimator.vue                   | 42 +++++++++++++++++++
 src/tools/gpt-token-estimator/index.ts        | 12 ++++++
 src/tools/index.ts                            |  2 +
 6 files changed, 77 insertions(+)
 create mode 100644 src/tools/gpt-token-estimator/gpt-token-estimator.e2e.spec.ts
 create mode 100644 src/tools/gpt-token-estimator/gpt-token-estimator.service.test.ts
 create mode 100644 src/tools/gpt-token-estimator/gpt-token-estimator.service.ts
 create mode 100644 src/tools/gpt-token-estimator/gpt-token-estimator.vue
 create mode 100644 src/tools/gpt-token-estimator/index.ts

diff --git a/src/tools/gpt-token-estimator/gpt-token-estimator.e2e.spec.ts b/src/tools/gpt-token-estimator/gpt-token-estimator.e2e.spec.ts
new file mode 100644
index 000000000..f437941e8
--- /dev/null
+++ b/src/tools/gpt-token-estimator/gpt-token-estimator.e2e.spec.ts
@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - Gpt token estimator', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/gpt-token-estimator');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('Gpt token estimator - IT Tools');
+  });
+
+  test('', async ({ page }) => {
+
+  });
+});
\ No newline at end of file
diff --git a/src/tools/gpt-token-estimator/gpt-token-estimator.service.test.ts b/src/tools/gpt-token-estimator/gpt-token-estimator.service.test.ts
new file mode 100644
index 000000000..86b6e484d
--- /dev/null
+++ b/src/tools/gpt-token-estimator/gpt-token-estimator.service.test.ts
@@ -0,0 +1,6 @@
+import { expect, describe, it } from 'vitest';
+// import { } from './gpt-token-estimator.service';
+//
+// describe('gpt-token-estimator', () => {
+//
+// })
\ No newline at end of file
diff --git a/src/tools/gpt-token-estimator/gpt-token-estimator.service.ts b/src/tools/gpt-token-estimator/gpt-token-estimator.service.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/tools/gpt-token-estimator/gpt-token-estimator.vue b/src/tools/gpt-token-estimator/gpt-token-estimator.vue
new file mode 100644
index 000000000..73b737315
--- /dev/null
+++ b/src/tools/gpt-token-estimator/gpt-token-estimator.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { GPTTokens } from 'gpt-tokens';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const inputText = ref('');
+const outputTokenCosts = computed(() => {
+  try {
+    const usageInfo = new GPTTokens({
+      model: 'gpt-3.5-turbo-1106',
+      messages: [
+        { role: 'system', content: 'You are a helpful, pattern-following assistant that translates corporate jargon into plain English.' },
+        { role: 'user', content: 'This late pivot means we don\'t have time to boil the ocean for the client deliverable.' },
+      ],
+    });
+
+    console.info('Used tokens: ', usageInfo.usedTokens);
+    console.info('Used USD: ', usageInfo.usedUSD);
+  }
+  catch (e: any) {
+  }
+});
+</script>
+
+<template>
+  <div>
+    <c-input-text
+      v-model:value="inputHtml"
+      multiline raw-text
+      placeholder="Your Html content..."
+      rows="8"
+      autofocus
+      label="Your Html to convert (can paste from clipboard):"
+      paste-html
+    />
+
+    <n-divider />
+
+    <n-form-item label="Output markdown:">
+      <TextareaCopyable :value="outputMarkdown" />
+    </n-form-item>
+  </div>
+</template>
diff --git a/src/tools/gpt-token-estimator/index.ts b/src/tools/gpt-token-estimator/index.ts
new file mode 100644
index 000000000..3476fa070
--- /dev/null
+++ b/src/tools/gpt-token-estimator/index.ts
@@ -0,0 +1,12 @@
+import { CurrencyDollar } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'GPT Token Estimator',
+  path: '/gpt-token-estimator',
+  description: 'OpenAI GPT Token Estimator',
+  keywords: ['gpt', 'token', 'estimator'],
+  component: () => import('./gpt-token-estimator.vue'),
+  icon: CurrencyDollar,
+  createdAt: new Date('2024-08-15'),
+});
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 388cfaf49..2a4c66a11 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -2,6 +2,7 @@ import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as emailNormalizer } from './email-normalizer';
+import { tool as gptTokenEstimator } from './gpt-token-estimator';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -160,6 +161,7 @@ export const toolsByCategory: ToolCategory[] = [
       emailNormalizer,
       regexTester,
       regexMemo,
+      gptTokenEstimator,
     ],
   },
   {