Upload 24 files

Dockerfile

@@ -0,0 +1,20 @@
+# Use the official Node.js image as the base image
+FROM node:14
+
+# Set the working directory inside the container
+WORKDIR /app
+
+# Copy package.json and package-lock.json to the working directory
+COPY package*.json ./
+
+# Install the dependencies
+RUN npm ci
+
+# Copy the rest of the application code to the working directory
+COPY . .
+
+# Expose the port the app will run on
+EXPOSE 3001
+
+# Start the application
+CMD ["npm", "run", "dev"]

README.md

@@ -1,11 +1,29 @@
----
-title: Code Translator
-emoji: 📚
-colorFrom: indigo
-colorTo: indigo
-sdk: docker
-pinned: false
-license: mit
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# AI Code Translator
+
+Use AI to translate code from one language to another.
+
+![AI Code Translator](./public/screenshot.png)
+
+## Running Locally
+
+**1. Clone Repo**
+
+```bash
+git clone https://github.com/mckaywrigley/ai-code-translator.git
+```
+
+**2. Install Dependencies**
+
+```bash
+npm i
+```
+
+**3. Run App**
+
+```bash
+npm run dev
+```
+
+## Contact
+
+If you have any questions, feel free to reach out to me on [Twitter](https://twitter.com/mckaywrigley).

components/APIKeyInput.tsx

@@ -0,0 +1,16 @@
+interface Props {
+  apiKey: string;
+  onChange: (apiKey: string) => void;
+}
+
+export const APIKeyInput: React.FC<Props> = ({ apiKey, onChange }) => {
+  return (
+    <input
+      className="mt-1 h-[24px] w-[280px] rounded-md border border-gray-300 px-3 py-2 text-black shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+      type="password"
+      placeholder="OpenAI API Key"
+      value={apiKey}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  );
+};

components/CodeBlock.tsx

@@ -0,0 +1,50 @@
+import { StreamLanguage } from '@codemirror/language';
+import { go } from '@codemirror/legacy-modes/mode/go';
+import { tokyoNight } from '@uiw/codemirror-theme-tokyo-night';
+import CodeMirror from '@uiw/react-codemirror';
+import { FC, useEffect, useState } from 'react';
+
+interface Props {
+  code: string;
+  editable?: boolean;
+  onChange?: (value: string) => void;
+}
+
+export const CodeBlock: FC<Props> = ({
+  code,
+  editable = false,
+  onChange = () => {},
+}) => {
+  const [copyText, setCopyText] = useState<string>('Copy');
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setCopyText('Copy');
+    }, 2000);
+
+    return () => clearTimeout(timeout);
+  }, [copyText]);
+
+  return (
+    <div className="relative">
+      <button
+        className="absolute right-0 top-0 z-10 rounded bg-[#1A1B26] p-1 text-xs text-white hover:bg-[#2D2E3A] active:bg-[#2D2E3A]"
+        onClick={() => {
+          navigator.clipboard.writeText(code);
+          setCopyText('Copied!');
+        }}
+      >
+        {copyText}
+      </button>
+
+      <CodeMirror
+        editable={editable}
+        value={code}
+        minHeight="500px"
+        extensions={[StreamLanguage.define(go)]}
+        theme={tokyoNight}
+        onChange={(value) => onChange(value)}
+      />
+    </div>
+  );
+};

components/LanguageSelect.tsx

@@ -0,0 +1,77 @@
+import type { FC } from 'react';
+
+interface Props {
+  language: string;
+  onChange: (language: string) => void;
+}
+
+export const LanguageSelect: FC<Props> = ({ language, onChange }) => {
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    onChange(e.target.value);
+  };
+
+  return (
+    <select
+      className="w-full rounded-md bg-[#1F2937] px-4 py-2 text-neutral-200"
+      value={language}
+      onChange={handleChange}
+    >
+      {languages
+        .sort((a, b) => a.label.localeCompare(b.label))
+        .map((language) => (
+          <option key={language.value} value={language.value}>
+            {language.label}
+          </option>
+        ))}
+    </select>
+  );
+};
+
+const languages = [
+  { value: 'Pascal', label: 'Pascal' },
+  { value: 'JavaScript', label: 'JavaScript' },
+  { value: 'TypeScript', label: 'TypeScript' },
+  { value: 'Python', label: 'Python' },
+  { value: 'TSX', label: 'TSX' },
+  { value: 'JSX', label: 'JSX' },
+  { value: 'Vue', label: 'Vue' },
+  { value: 'Go', label: 'Go' },
+  { value: 'C', label: 'C' },
+  { value: 'C++', label: 'C++' },
+  { value: 'Java', label: 'Java' },
+  { value: 'C#', label: 'C#' },
+  { value: 'Visual Basic .NET', label: 'Visual Basic .NET' },
+  { value: 'SQL', label: 'SQL' },
+  { value: 'Assembly Language', label: 'Assembly Language' },
+  { value: 'PHP', label: 'PHP' },
+  { value: 'Ruby', label: 'Ruby' },
+  { value: 'Swift', label: 'Swift' },
+  { value: 'SwiftUI', label: 'SwiftUI' },
+  { value: 'Kotlin', label: 'Kotlin' },
+  { value: 'R', label: 'R' },
+  { value: 'Objective-C', label: 'Objective-C' },
+  { value: 'Perl', label: 'Perl' },
+  { value: 'SAS', label: 'SAS' },
+  { value: 'Scala', label: 'Scala' },
+  { value: 'Dart', label: 'Dart' },
+  { value: 'Rust', label: 'Rust' },
+  { value: 'Haskell', label: 'Haskell' },
+  { value: 'Lua', label: 'Lua' },
+  { value: 'Groovy', label: 'Groovy' },
+  { value: 'Elixir', label: 'Elixir' },
+  { value: 'Clojure', label: 'Clojure' },
+  { value: 'Lisp', label: 'Lisp' },
+  { value: 'Julia', label: 'Julia' },
+  { value: 'Matlab', label: 'Matlab' },
+  { value: 'Fortran', label: 'Fortran' },
+  { value: 'COBOL', label: 'COBOL' },
+  { value: 'Bash', label: 'Bash' },
+  { value: 'Powershell', label: 'Powershell' },
+  { value: 'PL/SQL', label: 'PL/SQL' },
+  { value: 'CSS', label: 'CSS' },
+  { value: 'Racket', label: 'Racket' },
+  { value: 'HTML', label: 'HTML' },
+  { value: 'NoSQL', label: 'NoSQL' },
+  { value: 'Natural Language', label: 'Natural Language' },
+  { value: 'CoffeeScript', label: 'CoffeeScript' },
+];

components/ModelSelect.tsx

@@ -0,0 +1,24 @@
+import { OpenAIModel } from '@/types/types';
+import { FC } from 'react';
+
+interface Props {
+  model: OpenAIModel;
+  onChange: (model: OpenAIModel) => void;
+}
+
+export const ModelSelect: FC<Props> = ({ model, onChange }) => {
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    onChange(e.target.value as OpenAIModel);
+  };
+
+  return (
+    <select
+      className="h-[40px] w-[140px] rounded-md bg-[#1F2937] px-4 py-2 text-neutral-200"
+      value={model}
+      onChange={handleChange}
+    >
+      <option value="gpt-3.5-turbo">GPT-3.5</option>
+      <option value="gpt-4">GPT-4</option>
+    </select>
+  );
+};

components/TextBlock.tsx

@@ -0,0 +1,21 @@
+interface Props {
+  text: string;
+  editable?: boolean;
+  onChange?: (value: string) => void;
+}
+
+export const TextBlock: React.FC<Props> = ({
+  text,
+  editable = false,
+  onChange = () => {},
+}) => {
+  return (
+    <textarea
+      className="min-h-[500px] w-full bg-[#1A1B26] p-4 text-[15px] text-neutral-200 focus:outline-none"
+      style={{ resize: 'none' }}
+      value={text}
+      onChange={(e) => onChange(e.target.value)}
+      disabled={!editable}
+    />
+  );
+};

docker-compose.yml

@@ -0,0 +1,17 @@
+version: '3.8'
+
+services:
+  ai-code-translator:
+    build: .
+    container_name: ai_code_translator
+    ports:
+      - '3001:3000'
+    volumes:
+      - .:/app
+      - /app/node_modules
+    environment:
+      - NODE_ENV=development
+    command: npm run dev
+    restart: always
+    security_opt:
+      - no-new-privileges:true

next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "code-translate",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@codemirror/legacy-modes": "^6.3.2",
+    "@uiw/codemirror-theme-tokyo-night": "^4.19.11",
+    "@uiw/react-codemirror": "^4.19.11",
+    "endent": "^2.1.0",
+    "eventsource-parser": "^1.0.0",
+    "next": "13.2.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.15.11",
+    "@types/react": "18.0.31",
+    "@types/react-dom": "18.0.11",
+    "autoprefixer": "^10.4.14",
+    "eslint": "8.37.0",
+    "eslint-config-next": "13.2.4",
+    "postcss": "^8.4.21",
+    "prettier-plugin-tailwindcss": "^0.2.6",
+    "tailwindcss": "^3.3.1",
+    "typescript": "5.0.3"
+  }
+}

pages/_app.tsx

@@ -0,0 +1,15 @@
+import "@/styles/globals.css";
+import type { AppProps } from "next/app";
+import { Inter } from "next/font/google";
+
+const inter = Inter({ subsets: ["latin"] });
+
+function App({ Component, pageProps }: AppProps<{}>) {
+  return (
+    <main className={inter.className}>
+      <Component {...pageProps} />
+    </main>
+  );
+}
+
+export default App;

pages/_document.tsx

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}

pages/api/translate.ts

@@ -0,0 +1,28 @@
+import { TranslateBody } from '@/types/types';
+import { OpenAIStream } from '@/utils';
+
+export const config = {
+  runtime: 'edge',
+};
+
+const handler = async (req: Request): Promise<Response> => {
+  try {
+    const { inputLanguage, outputLanguage, inputCode, model, apiKey } =
+      (await req.json()) as TranslateBody;
+
+    const stream = await OpenAIStream(
+      inputLanguage,
+      outputLanguage,
+      inputCode,
+      model,
+      apiKey,
+    );
+
+    return new Response(stream);
+  } catch (error) {
+    console.error(error);
+    return new Response('Error', { status: 500 });
+  }
+};
+
+export default handler;

pages/index.tsx

@@ -0,0 +1,225 @@
+import { APIKeyInput } from '@/components/APIKeyInput';
+import { CodeBlock } from '@/components/CodeBlock';
+import { LanguageSelect } from '@/components/LanguageSelect';
+import { ModelSelect } from '@/components/ModelSelect';
+import { TextBlock } from '@/components/TextBlock';
+import { OpenAIModel, TranslateBody } from '@/types/types';
+import Head from 'next/head';
+import { useEffect, useState } from 'react';
+
+export default function Home() {
+  const [inputLanguage, setInputLanguage] = useState<string>('JavaScript');
+  const [outputLanguage, setOutputLanguage] = useState<string>('Python');
+  const [inputCode, setInputCode] = useState<string>('');
+  const [outputCode, setOutputCode] = useState<string>('');
+  const [model, setModel] = useState<OpenAIModel>('gpt-3.5-turbo');
+  const [loading, setLoading] = useState<boolean>(false);
+  const [hasTranslated, setHasTranslated] = useState<boolean>(false);
+  const [apiKey, setApiKey] = useState<string>('');
+
+  const handleTranslate = async () => {
+    const maxCodeLength = model === 'gpt-3.5-turbo' ? 6000 : 12000;
+
+    if (!apiKey) {
+      alert('Please enter an API key.');
+      return;
+    }
+
+    if (inputLanguage === outputLanguage) {
+      alert('Please select different languages.');
+      return;
+    }
+
+    if (!inputCode) {
+      alert('Please enter some code.');
+      return;
+    }
+
+    if (inputCode.length > maxCodeLength) {
+      alert(
+        `Please enter code less than ${maxCodeLength} characters. You are currently at ${inputCode.length} characters.`,
+      );
+      return;
+    }
+
+    setLoading(true);
+    setOutputCode('');
+
+    const controller = new AbortController();
+
+    const body: TranslateBody = {
+      inputLanguage,
+      outputLanguage,
+      inputCode,
+      model,
+      apiKey,
+    };
+
+    const response = await fetch('/api/translate', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      signal: controller.signal,
+      body: JSON.stringify(body),
+    });
+
+    if (!response.ok) {
+      setLoading(false);
+      alert('Something went wrong.');
+      return;
+    }
+
+    const data = response.body;
+
+    if (!data) {
+      setLoading(false);
+      alert('Something went wrong.');
+      return;
+    }
+
+    const reader = data.getReader();
+    const decoder = new TextDecoder();
+    let done = false;
+    let code = '';
+
+    while (!done) {
+      const { value, done: doneReading } = await reader.read();
+      done = doneReading;
+      const chunkValue = decoder.decode(value);
+
+      code += chunkValue;
+
+      setOutputCode((prevCode) => prevCode + chunkValue);
+    }
+
+    setLoading(false);
+    setHasTranslated(true);
+    copyToClipboard(code);
+  };
+
+  const copyToClipboard = (text: string) => {
+    const el = document.createElement('textarea');
+    el.value = text;
+    document.body.appendChild(el);
+    el.select();
+    document.execCommand('copy');
+    document.body.removeChild(el);
+  };
+
+  const handleApiKeyChange = (value: string) => {
+    setApiKey(value);
+
+    localStorage.setItem('apiKey', value);
+  };
+
+  useEffect(() => {
+    if (hasTranslated) {
+      handleTranslate();
+    }
+  }, [outputLanguage]);
+
+  useEffect(() => {
+    const apiKey = localStorage.getItem('apiKey');
+
+    if (apiKey) {
+      setApiKey(apiKey);
+    }
+  }, []);
+
+  return (
+    <>
+      <Head>
+        <title>Code Translator</title>
+        <meta
+          name="description"
+          content="Use AI to translate code from one language to another."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <div className="flex h-full min-h-screen flex-col items-center bg-[#0E1117] px-4 pb-20 text-neutral-200 sm:px-10">
+        <div className="mt-10 flex flex-col items-center justify-center sm:mt-20">
+          <div className="text-4xl font-bold">AI Code Translator</div>
+        </div>
+
+        <div className="mt-6 text-center text-sm">
+          <APIKeyInput apiKey={apiKey} onChange={handleApiKeyChange} />
+        </div>
+
+        <div className="mt-2 flex items-center space-x-2">
+          <ModelSelect model={model} onChange={(value) => setModel(value)} />
+
+          <button
+            className="w-[140px] cursor-pointer rounded-md bg-violet-500 px-4 py-2 font-bold hover:bg-violet-600 active:bg-violet-700"
+            onClick={() => handleTranslate()}
+            disabled={loading}
+          >
+            {loading ? 'Translating...' : 'Translate'}
+          </button>
+        </div>
+
+        <div className="mt-2 text-center text-xs">
+          {loading
+            ? 'Translating...'
+            : hasTranslated
+            ? 'Output copied to clipboard!'
+            : 'Enter some code and click "Translate"'}
+        </div>
+
+        <div className="mt-6 flex w-full max-w-[1200px] flex-col justify-between sm:flex-row sm:space-x-4">
+          <div className="h-100 flex flex-col justify-center space-y-2 sm:w-2/4">
+            <div className="text-center text-xl font-bold">Input</div>
+
+            <LanguageSelect
+              language={inputLanguage}
+              onChange={(value) => {
+                setInputLanguage(value);
+                setHasTranslated(false);
+                setInputCode('');
+                setOutputCode('');
+              }}
+            />
+
+            {inputLanguage === 'Natural Language' ? (
+              <TextBlock
+                text={inputCode}
+                editable={!loading}
+                onChange={(value) => {
+                  setInputCode(value);
+                  setHasTranslated(false);
+                }}
+              />
+            ) : (
+              <CodeBlock
+                code={inputCode}
+                editable={!loading}
+                onChange={(value) => {
+                  setInputCode(value);
+                  setHasTranslated(false);
+                }}
+              />
+            )}
+          </div>
+          <div className="mt-8 flex h-full flex-col justify-center space-y-2 sm:mt-0 sm:w-2/4">
+            <div className="text-center text-xl font-bold">Output</div>
+
+            <LanguageSelect
+              language={outputLanguage}
+              onChange={(value) => {
+                setOutputLanguage(value);
+                setOutputCode('');
+              }}
+            />
+
+            {outputLanguage === 'Natural Language' ? (
+              <TextBlock text={outputCode} />
+            ) : (
+              <CodeBlock code={outputCode} />
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

prettier.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  trailingComma: "all",
+  singleQuote: true,
+  plugins: [require("prettier-plugin-tailwindcss")]
+};

styles/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+};

tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "nodenext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

types/types.ts

@@ -0,0 +1,13 @@
+export type OpenAIModel = 'gpt-3.5-turbo' | 'gpt-4';
+
+export interface TranslateBody {
+  inputLanguage: string;
+  outputLanguage: string;
+  inputCode: string;
+  model: OpenAIModel;
+  apiKey: string;
+}
+
+export interface TranslateResponse {
+  code: string;
+}

utils/index.ts

@@ -0,0 +1,143 @@
+import endent from 'endent';
+import {
+  createParser,
+  ParsedEvent,
+  ReconnectInterval,
+} from 'eventsource-parser';
+
+const createPrompt = (
+  inputLanguage: string,
+  outputLanguage: string,
+  inputCode: string,
+) => {
+  if (inputLanguage === 'Natural Language') {
+    return endent`
+    You are an expert programmer in all programming languages. Translate the natural language to "${outputLanguage}" code. Do not include \`\`\`.
+
+    Example translating from natural language to JavaScript:
+
+    Natural language:
+    Print the numbers 0 to 9.
+
+    JavaScript code:
+    for (let i = 0; i < 10; i++) {
+      console.log(i);
+    }
+
+    Natural language:
+    ${inputCode}
+
+    ${outputLanguage} code (no \`\`\`):
+    `;
+  } else if (outputLanguage === 'Natural Language') {
+    return endent`
+      You are an expert programmer in all programming languages. Translate the "${inputLanguage}" code to natural language in plain English that the average adult could understand. Respond as bullet points starting with -.
+  
+      Example translating from JavaScript to natural language:
+  
+      JavaScript code:
+      for (let i = 0; i < 10; i++) {
+        console.log(i);
+      }
+  
+      Natural language:
+      Print the numbers 0 to 9.
+      
+      ${inputLanguage} code:
+      ${inputCode}
+
+      Natural language:
+     `;
+  } else {
+    return endent`
+      You are an expert programmer in all programming languages. Translate the "${inputLanguage}" code to "${outputLanguage}" code. Do not include \`\`\`.
+  
+      Example translating from JavaScript to Python:
+  
+      JavaScript code:
+      for (let i = 0; i < 10; i++) {
+        console.log(i);
+      }
+  
+      Python code:
+      for i in range(10):
+        print(i)
+      
+      ${inputLanguage} code:
+      ${inputCode}
+
+      ${outputLanguage} code (no \`\`\`):
+     `;
+  }
+};
+
+export const OpenAIStream = async (
+  inputLanguage: string,
+  outputLanguage: string,
+  inputCode: string,
+  model: string,
+  key: string,
+) => {
+  const prompt = createPrompt(inputLanguage, outputLanguage, inputCode);
+
+  const system = { role: 'system', content: prompt };
+
+  const res = await fetch(`https://api.openai.com/v1/chat/completions`, {
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${key || process.env.OPENAI_API_KEY}`,
+    },
+    method: 'POST',
+    body: JSON.stringify({
+      model,
+      messages: [system],
+      temperature: 0,
+      stream: true,
+    }),
+  });
+
+  const encoder = new TextEncoder();
+  const decoder = new TextDecoder();
+
+  if (res.status !== 200) {
+    const statusText = res.statusText;
+    const result = await res.body?.getReader().read();
+    throw new Error(
+      `OpenAI API returned an error: ${
+        decoder.decode(result?.value) || statusText
+      }`,
+    );
+  }
+
+  const stream = new ReadableStream({
+    async start(controller) {
+      const onParse = (event: ParsedEvent | ReconnectInterval) => {
+        if (event.type === 'event') {
+          const data = event.data;
+
+          if (data === '[DONE]') {
+            controller.close();
+            return;
+          }
+
+          try {
+            const json = JSON.parse(data);
+            const text = json.choices[0].delta.content;
+            const queue = encoder.encode(text);
+            controller.enqueue(queue);
+          } catch (e) {
+            controller.error(e);
+          }
+        }
+      };
+
+      const parser = createParser(onParse);
+
+      for await (const chunk of res.body as any) {
+        parser.feed(decoder.decode(chunk));
+      }
+    },
+  });
+
+  return stream;
+};