feat(new tool): GPT Token Counter

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 }) => {
+
+  });
+});

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', () => {
+//
+// })

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>

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'),
+});

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,
     ],
   },
   {