Merge pull request #413 from RapidAPI/new/ai-text-shortener-using-ai

📦 NEW: Add AI Text Shortener app

Author: Nirmalya Ghosh

ai-text-shortener-app/.eslintrc.json

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

ai-text-shortener-app/.gitignore

@@ -0,0 +1,36 @@
+# 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

ai-text-shortener-app/README.md

@@ -0,0 +1,60 @@
+![Preview Image](https://user-images.githubusercontent.com/6391763/231090503-08da6cf8-9ff3-46e2-8a89-9118eeca1624.png)
+
+# Text Shortener using AI
+
+This project is a **TypeScript**-based web application that shortens input text using an AI API from [Rapid's API Hub](https://rapidapi.com/hub). The application is built with **Next.js**, **React**, and **Tailwind CSS**.
+
+## 👀 Live Preview
+
+To view a live preview of the application, click [here](https://example.com).
+
+## 📖 Guide
+
+[Read how we build this application](https://rapidapi.com/guides/building-a-text-shortener-app-using-ai-api-with-react-and-nextjs).
+
+## 🛠️ Installation Steps
+
+1. Download the `ai-text-shortener-app` directory. Click [here](https://download-directory.github.io/?url=https://github.com/RapidAPI/DevRel-Examples-External/tree/main/ai-text-shortener-app) to download it.
+
+2. Unzip the downloaded file and navigate to the working directory.
+
+```bash
+cd RapidAPI\ DevRel-Examples-External\ main\ ai-text-shortener-app/
+```
+
+3. Install dependencies
+
+```bash
+npm install
+```
+
+4. Create `.env.local` file in root and add your RapidAPI key.
+
+```bash
+RAPID_API_KEY=YOUR_RAPID_API_KEY
+RAPID_API_HOST=YOUR_RAPID_API_HOST
+
+```
+
+5. Run the app
+
+```bash
+npm run dev
+```
+
+You are all set! Open [localhost:3000](http://localhost:3000/) to see the app.
+
+## 💡 Usage
+
+To shorten a piece of text, simply enter the text into the input field and click the "Summarize" button. The shortened text will be displayed in the output field below.
+
+## 🚀 API Usage
+
+This application uses the AI API from Rapid's API Hub to shorten text. You can find more information about the API [here](https://rapidapi.com/tldrthishq-tldrthishq-default/api/tldrthis).
+
+## 💻 Technologies Used
+
+- Next.js
+- React
+- Tailwind CSS
+- TypeScript

ai-text-shortener-app/components/Form.tsx

@@ -0,0 +1,61 @@
+interface FormProps {
+  text: string;
+  setText: (text: string) => void;
+  setSummary: (summary: string) => void;
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
+}
+
+export const Form = ({
+  text,
+  setText,
+  setSummary,
+  loading,
+  setLoading,
+}: FormProps) => {
+  const handleClick = async () => {
+    setLoading(true);
+
+    try {
+      const response = await fetch("/api/summarize", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          text: text,
+          min_length: 100,
+          max_length: 300,
+        }),
+      });
+
+      const data = await response.json();
+
+      setSummary(data.summary);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="p-4 border rounded flex flex-col space-y-4 bg-gray-50">
+      <textarea
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        placeholder="Text"
+        className="border rounded p-4"
+        rows={10}
+        disabled={loading}
+      />
+      <button
+        onClick={handleClick}
+        className="bg-black hover:bg-black/80 text-white rounded px-4 py-2 disabled:opacity-50 disabled:cursor-not-allowed"
+        disabled={loading || !text.trim().length}
+      >
+        {loading ? "Loading..." : "Summarize"}
+      </button>
+    </div>
+  );
+};

ai-text-shortener-app/components/Tweet.tsx

@@ -0,0 +1,39 @@
+interface TweetProps {
+  summary: string;
+  loading: boolean;
+}
+
+export const Tweet = ({ summary = "", loading }: TweetProps) => {
+  if (!summary.length) {
+    return null;
+  }
+
+  if (loading) {
+    return (
+      <div className="p-2 border space-y-2 rounded bg-white">Loading...</div>
+    );
+  }
+
+  return (
+    <div className="border space-y-2 rounded bg-white overflow-hidden">
+      <div className="p-2 border-b flex justify-end items-center space-x-2">
+        <button
+          className="text-xs text-black border rounded-sm px-2 py-1"
+          onClick={() => {
+            navigator.clipboard.writeText(summary);
+          }}
+        >
+          Copy
+        </button>
+        <a
+          className="text-xs bg-blue-500 text-white rounded-sm px-2 py-1"
+          href={`https://twitter.com/intent/tweet?text=${summary}`}
+          target="_blank"
+        >
+          Tweet
+        </a>
+      </div>
+      <div className="p-2">{summary}</div>
+    </div>
+  );
+};

ai-text-shortener-app/next.config.js

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