nlp assemblyai frontend
1.0.0
Proyek ini adalah aplikasi web berbasis Next yang memungkinkan pengguna mengunggah file audio MP3 dan mengubahnya menjadi teks menggunakan API AssemblyAI.
Ikuti petunjuk ini untuk menyiapkan dan menjalankan proyek di mesin lokal Anda.
Pastikan Anda telah menginstal yang berikut ini:
Kloning repositori:
git clone https://github.com/Manishyadav514/nlp-assemblyai-frontend.git
cd nlp-assemblyai-frontend
npm installPeriksa repo backend, nlp-assemblyai-backend, untuk titik akhir API.
Contoh Respon
{
s"transcript": "This is the transcribed text from the audio file."
}
Saya telah menerapkan aplikasi Next.js di Halaman GitHub yang melibatkan beberapa langkah, karena Halaman GitHub terutama untuk situs statis, sedangkan aplikasi Next.js sering kali memerlukan server. Namun, Anda dapat menerapkan ekspor statis aplikasi Next.js ke Halaman GitHub. Inilah cara Anda melakukannya:
Buka file next.config.js Anda (buat file jika belum ada) dan tambahkan konfigurasi berikut untuk mengekspor aplikasi Next.js Anda sebagai HTML statis:
/** @type {import('next').NextConfig} */
const nextConfig = {
output : "export" ,
images : {
unoptimized : true , // Disable Image Optimization if needed
} ,
trailingSlash : true , // Adds trailing slash to all routes
basePath : "/your-repo-name" , // Replace with your GitHub repository name
} ;
module . exports = nextConfig ;output: 'export' memberitahu Next.js untuk membuat situs statis.images: { unoptimized: true } diperlukan jika Anda menggunakan fitur pengoptimalan gambar Next.js yang tidak kompatibel dengan hosting statis.basePath penting jika situs Halaman GitHub Anda tidak akan dilayani dari akar domain (misalnya, username.github.io/your-repo-name ). Perbarui skrip package.json Anda untuk menyertakan perintah build untuk ekspor statis:
{
"scripts" : {
"build" : " next build " ,
"export" : " next export " ,
"deploy" : " npm run build && npm run export && gh-pages -d out "
}
}export akan menghasilkan file statis di direktori out .deploy akan membangun, mengekspor, dan menyebarkan situs Anda ke Halaman GitHub.gh-pages Instal paket gh-pages untuk menangani penerapan ke Halaman GitHub:
npm install gh-pages --save-dev Tambahkan bidang homepage di package.json Anda untuk menunjuk ke URL Halaman GitHub Anda:
{
"homepage" : " https://username.github.io/your-repo-name "
}Jalankan perintah berikut untuk membangun, mengekspor, dan menerapkan aplikasi Next.js Anda ke Halaman GitHub:
npm run deploy Perintah ini akan membuat cabang baru bernama gh-pages di repositori GitHub Anda dan memasukkan konten direktori out ke sana. Halaman GitHub secara otomatis akan menyajikan file dari cabang ini.
gh-pages . Aplikasi Next.js Anda sekarang harus diterapkan dan dapat diakses melalui https://username.github.io/your-repo-name .
homepage di package.json sesuai dengan itu. Dengan menggunakan next-pwa , Anda dapat memanfaatkan keuntungan signifikan dari Aplikasi Web Progresif (PWA), seperti peningkatan kemampuan untuk ditemukan, pengurangan penggunaan memori, pengembangan yang hemat biaya, dan kinerja offline yang sangat cepat. Aplikasi web apa pun, apa pun jenis atau kerumitannya, dapat diubah menjadi PWA dengan relatif mudah. Mengubah situs web menjadi Aplikasi Web Progresif melibatkan penambahan beberapa fitur dan memodifikasi beberapa kode untuk memungkinkan situs web berfungsi seperti aplikasi asli di perangkat seluler. Berikut adalah langkah-langkah umum untuk mencapai hal ini.
Kami memiliki arsitektur App Router Next.js sehingga akan mengikuti metode khusus tersebut. Akan menggunakan paket next-pwa untuk membuat PWA.
yarn add next-pwa && yarn add -D webpack
Ini menjelaskan PWA Anda, termasuk nama, ikon, dan detail lainnya. Untuk membuat manifes aplikasi web, Anda dapat menggunakan alat seperti PWA Builder atau membuatnya secara manual. Setelah Anda memiliki file manifes, tambahkan ke direktori root situs web Anda. Jika Anda tidak memiliki sistem terstruktur untuk templat Anda, tambahkan baris berikut untuk memulai:
Perbarui app/manifest.json (App Router) atau public/manifest.json (Pages Router) dengan konten berikut:
app/manifest.json
{
"name": "nlp_pwa",
"short_name": "nlp_pwa",
"description": "Your App Description",
"start_url": "/",
"icons": [
{
"src": "./196.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffee00",
"background_color": "#ffee00",
"display": "standalone"
}
<head />Tambahkan yang berikut ke Anda:
aplikasi/tata letak.tsx
import type { Metadata, Viewport } from "next";
const APP_NAME = "PWA App";
const APP_DEFAULT_TITLE = "My Awesome PWA App";
const APP_TITLE_TEMPLATE = "%s - PWA App";
const APP_DESCRIPTION = "Best PWA app in the world!";
export const metadata: Metadata = {
applicationName: APP_NAME,
title: {
default: APP_DEFAULT_TITLE,
template: APP_TITLE_TEMPLATE,
},
description: APP_DESCRIPTION,
manifest: "/manifest.json",
appleWebApp: {
capable: true,
statusBarStyle: "default",
title: APP_DEFAULT_TITLE,
// startUpImage: [],
},
formatDetection: {
telephone: false,
},
openGraph: {
type: "website",
siteName: APP_NAME,
title: {
default: APP_DEFAULT_TITLE,
template: APP_TITLE_TEMPLATE,
},
description: APP_DESCRIPTION,
},
twitter: {
card: "summary",
title: {
default: APP_DEFAULT_TITLE,
template: APP_TITLE_TEMPLATE,
},
description: APP_DESCRIPTION,
},
};
export const viewport: Viewport = {
themeColor: "#FFFFFF",
};
halaman/_app.tsx
import type { AppProps } from "next/app";
import Head from "next/head";
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>My awesome PWA app</title>
<meta name="description" content="Best PWA app in the world!" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="mask-icon" href="/icons/mask-icon.svg" color="#FFFFFF" />
<meta name="theme-color" content="#ffffff" />
<link rel="apple-touch-icon" href="/icons/touch-icon-iphone.png" />
<link
rel="apple-touch-icon"
sizes="152x152"
href="/icons/touch-icon-ipad.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/icons/touch-icon-iphone-retina.png"
/>
<link
rel="apple-touch-icon"
sizes="167x167"
href="/icons/touch-icon-ipad-retina.png"
/>
<link rel="manifest" href="/manifest.json" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:url" content="https://yourdomain.com" />
<meta name="twitter:title" content="My awesome PWA app" />
<meta name="twitter:description" content="Best PWA app in the world!" />
<meta name="twitter:image" content="/icons/twitter.png" />
<meta name="twitter:creator" content="@DavidWShadow" />
<meta property="og:type" content="website" />
<meta property="og:title" content="My awesome PWA app" />
<meta property="og:description" content="Best PWA app in the world!" />
<meta property="og:site_name" content="My awesome PWA app" />
<meta property="og:url" content="https://yourdomain.com" />
<meta property="og:image" content="/icons/og.png" />
{/* add the following only if you want to add a startup image for Apple devices. */}
<link
rel="apple-touch-startup-image"
href="/images/apple_splash_2048.png"
sizes="2048x2732"
/>
<link
rel="apple-touch-startup-image"
href="/images/apple_splash_1668.png"
sizes="1668x2224"
/>
<link
rel="apple-touch-startup-image"
href="/images/apple_splash_1536.png"
sizes="1536x2048"
/>
<link
rel="apple-touch-startup-image"
href="/images/apple_splash_1125.png"
sizes="1125x2436"
/>
<link
rel="apple-touch-startup-image"
href="/images/apple_splash_1242.png"
sizes="1242x2208"
/>
<link
rel="apple-touch-startup-image"
href="/images/apple_splash_750.png"
sizes="750x1334"
/>
<link
rel="apple-touch-startup-image"
href="/images/apple_splash_640.png"
sizes="640x1136"
/>
</Head>
<Component {...pageProps} />
</>
);
}
jika menggunakan pekerja layanan khusus, tambahkan kode di bawah ini di kepala app/layout.tsx (Router Aplikasi) atau app.js (Router Halaman)
<head>
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#000000" />
<link rel="apple-touch-icon" href="/196.png" />
<meta name="mobile-web-app-capable" content="yes" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
{/* <!-- iOS Splash Screens --> */}
<link
href="/splashscreens/iphone5_splash.png"
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image"
/>
</head>
imp: gunakan ini jika paket pwa berikutnya tidak berfungsi (Ini tidak berfungsi untuk saya saat menerapkan sebagai situs statistik di Halaman Github)
Pekerja layanan adalah file JavaScript yang berjalan di latar belakang dan mencegat permintaan jaringan, dan merupakan elemen inti dari teknologi PWA modern. Service Worker akan bertanggung jawab atas semua cache file, pemberitahuan push server, pembaruan konten, manipulasi data, dll., dengan mendengarkan permintaan jaringan di server dan menempatkannya sebagai file .js di perangkat pengguna. Service Worker kemudian akan memantau kejadian ini dan mengembalikan respons yang sesuai.
Selain itu, konten yang ditampilkan disesuaikan berdasarkan cache yang di-cache bahkan ketika pengguna sedang offline. Selain itu, Anda juga dapat menggunakan data cache sebagai variabel dan parameter. Artinya meskipun pemuatan pertama memerlukan waktu beberapa detik, pemuatan berikutnya dengan memanfaatkan pekerja layanan akan lebih cepat. Oleh karena itu, hal ini memungkinkan PWA bekerja secara offline dan memuat dengan cepat.
Anda dapat menambahkan pekerja layanan ke situs web Anda dengan menulis kode sendiri atau menggunakan alat seperti Workbox. Anda dapat menyalin kode di bawah ini. Untuk menggunakan kode ini, buat file baru dan beri nama sw.js sebelum menyimpan perubahan Anda. next-pwa menangani penyiapan pekerja layanan, jadi Anda tidak perlu membuatnya secara manual. Pastikan saja pekerja layanan terdaftar dengan benar di aplikasi Anda.
update public/service-worker.js
const CACHE_NAME = "my-pwa-cache-v1";
const urlsToCache = ["/"]; // add other urls that needs to be cached
self.addEventListener("install", (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener("fetch", (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});
self.addEventListener("activate", (event) => {
const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then((keyList) =>
Promise.all(
keyList.map((key) => {
if (!cacheWhitelist.includes(key)) {
return caches.delete(key);
}
})
)
)
);
});
withPWA * Perbarui atau buat next.config.js Anda dengan
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
compiler: {
removeConsole: process.env.NODE_ENV !== "development",
},
};
const withPWA = require("next-pwa")({
dest: "public",
disable: process.env.NODE_ENV === "development",
register: true,
});
module.exports = withPWA(nextConfig);
const nextConfig = {};
const withPWA = require("@ducanh2912/next-pwa").default({
dest: "public",
disable: process.env.NODE_ENV === "development",
runtimeCaching: [
{
urlPattern: /^https://fonts.(googleapis|gstatic).com/.*/i,
handler: "CacheFirst",
options: {
cacheName: "google-fonts",
expiration: {
maxEntries: 4,
maxAgeSeconds: 365 * 24 * 60 * 60, // 1 year
},
},
},
{
urlPattern: /^https://cdnjs.cloudflare.com/.*/i,
handler: "CacheFirst",
options: {
cacheName: "static-resources",
expiration: {
maxEntries: 20,
maxAgeSeconds: 365 * 24 * 60 * 60, // 1 year
},
},
},
{
urlPattern: /.(?:png|jpg|jpeg|svg|gif|ico)$/i,
handler: "CacheFirst",
options: {
cacheName: "images",
expiration: {
maxEntries: 60,
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
},
},
},
{
urlPattern: /^/(?!api/).*/i,
handler: "NetworkFirst",
options: {
cacheName: "pages",
expiration: {
maxEntries: 50,
maxAgeSeconds: 24 * 60 * 60, // 1 day
},
},
},
],
});
module.exports = withPWA({
...nextConfig,
});
Gunakan kode di bawah ini jika menggunakan pekerja layanan khusus alih-alih pwa berikutnya
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
output: "export", //remove this line if not expoerting as a static site
compiler: {
removeConsole: process.env.NODE_ENV !== "development",
},
};
module.exports = nextConfig;
Setelah menjalankan build berikutnya, ini akan menghasilkan dua file di publik Anda: workbox-*.js dan sw.js, yang secara otomatis akan disajikan secara statis.
Next.js sebagai situs statis di Github Pages dan membuat PWAnext-pwa biasanya memerlukan pengaturan output: 'export' di next.config.js saat diterapkan ke situs statis seperti Halaman GitHub.npx serve@latest outnext export telah dihapus dan digantikan dengan 'output: ekspor' di next.config.js.
