Initial commit

Created from https://vercel.com/new

Author: officialmofabs

.env.local.example

@@ -0,0 +1 @@
+OPENAI_API_KEY=YOUR_KEY_HERE

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+yarn.lock

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

@@ -0,0 +1,29 @@
+# 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}
+    />
+  );
+};