nlp assemblyai frontend
1.0.0
هذا المشروع عبارة عن تطبيق ويب يعتمد على Next ويسمح للمستخدمين بتحميل ملفات صوتية MP3 وتحويلها إلى نص باستخدام AssemblyAI API.
اتبع هذه الإرشادات لإعداد المشروع وتشغيله على جهازك المحلي.
تأكد من تثبيت ما يلي:
استنساخ المستودع:
git clone https://github.com/Manishyadav514/nlp-assemblyai-frontend.git
cd nlp-assemblyai-frontend
npm installتحقق من الريبو الخلفي، nlp-assemblyai-backend، لنقطة نهاية API.
استجابة المثال
{
s"transcript": "This is the transcribed text from the audio file."
}
لقد قمت بنشر تطبيق Next.js على صفحات GitHub والذي يتضمن بضع خطوات، حيث أن GitHub Pages مخصص بشكل أساسي للمواقع الثابتة، بينما تتطلب تطبيقات Next.js غالبًا خادمًا. ومع ذلك، يمكنك نشر تصدير ثابت لتطبيق Next.js إلى صفحات GitHub. وإليك كيف يمكنك القيام بذلك:
افتح ملف next.config.js (قم بإنشاء ملف إذا لم يكن موجودًا) وأضف التكوين التالي لتصدير تطبيق Next.js بتنسيق HTML ثابت:
/** @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' يخبر Next.js بإنشاء موقع ثابت.images: { unoptimized: true } ضروريًا إذا كنت تستخدم ميزات تحسين الصور Next.js غير المتوافقة مع الاستضافة الثابتة.basePath مهمًا إذا لم يتم تقديم موقع صفحات GitHub الخاص بك من جذر المجال (على سبيل المثال، username.github.io/your-repo-name ). قم بتحديث البرامج النصية package.json الخاصة بك لتتضمن أمر إنشاء للتصدير الثابت:
{
"scripts" : {
"build" : " next build " ,
"export" : " next export " ,
"deploy" : " npm run build && npm run export && gh-pages -d out "
}
}export بإنشاء الملفات الثابتة في الدليل out .deploy بإنشاء موقعك وتصديره ونشره على صفحات GitHub.gh-pages قم بتثبيت حزمة gh-pages للتعامل مع النشر على صفحات GitHub:
npm install gh-pages --save-dev أضف حقل homepage في package.json الخاص بك للإشارة إلى عنوان URL الخاص بصفحات GitHub:
{
"homepage" : " https://username.github.io/your-repo-name "
}قم بتشغيل الأمر التالي لإنشاء تطبيق Next.js وتصديره ونشره على صفحات GitHub:
npm run deploy سيقوم هذا الأمر بإنشاء فرع جديد يسمى gh-pages في مستودع GitHub الخاص بك ودفع محتويات الدليل out هناك. ستعمل صفحات GitHub تلقائيًا على تقديم الملفات من هذا الفرع.
gh-pages . يجب الآن نشر تطبيق Next.js الخاص بك ويمكن الوصول إليه عبر https://username.github.io/your-repo-name .
homepage في package.json وفقًا لذلك. باستخدام next-pwa ، يمكنك الاستفادة من المزايا المهمة لتطبيقات الويب التقدمية (PWAs)، مثل إمكانية الاكتشاف المحسنة، وتقليل استخدام الذاكرة، والتطوير الفعال من حيث التكلفة، والأداء السريع دون اتصال بالإنترنت بشكل ملحوظ. يمكن تحويل أي تطبيق ويب، بغض النظر عن نوعه أو تعقيده، إلى PWA بسهولة نسبية. يتضمن تحويل موقع ويب إلى تطبيق ويب تقدمي إضافة بعض الميزات وتعديل بعض التعليمات البرمجية لتمكين موقع الويب من العمل مثل التطبيق الأصلي على الأجهزة المحمولة. فيما يلي الخطوات العامة لتحقيق ذلك.
لدينا بنية App Router الخاصة بـ Next.js، لذا سنتبع تلك الأساليب المحددة. سيتم استخدام حزمة pwa التالية لإنشاء PWA.
yarn add next-pwa && yarn add -D webpack
وهو يصف PWA الخاص بك، بما في ذلك اسمه وأيقوناته وتفاصيل أخرى. لإنشاء بيان تطبيق الويب، يمكنك استخدام أداة مثل PWA Builder أو إنشائه يدويًا. بمجرد حصولك على ملف البيان، قم بإضافته إلى الدليل الجذر لموقع الويب الخاص بك. إذا لم يكن لديك نظام منظم لقوالبك، أضف هذه السطور للبدء:
قم بتحديث app/manifest.json (جهاز توجيه التطبيق) أو public/manifest.json (جهاز توجيه الصفحات) بالمحتوى التالي:
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 />أضف ما يلي إلى حسابك:
app/layout.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",
};
الصفحات/_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} />
</>
);
}
إذا كنت تستخدم عامل خدمة مخصص، أضف الكود أدناه في رأس app/layout.tsx (جهاز توجيه التطبيق) أو app.js (جهاز توجيه الصفحة)
<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: استخدم هذا إذا لم تعمل حزمة pwa التالية (لم تنجح معي أثناء النشر كموقع ثابت على صفحات Github)
عامل الخدمة هو ملف JavaScript يتم تشغيله في الخلفية ويعترض طلبات الشبكة، وهو العنصر الأساسي لتقنية PWA الحديثة. سيكون عامل الخدمة مسؤولاً عن جميع عمليات التخزين المؤقت للملفات، وإشعارات دفع الخادم، وتحديثات المحتوى، ومعالجة البيانات، وما إلى ذلك، من خلال الاستماع إلى طلبات الشبكة على الخادم ووضع ملفات .js على أجهزة المستخدم. سيقوم عامل الخدمة بعد ذلك بمراقبة هذه الأحداث وإرجاع الاستجابة المناسبة.
بالإضافة إلى ذلك، يتم تخصيص المحتوى المعروض استنادًا إلى ذاكرة التخزين المؤقت حتى عندما يكون المستخدم غير متصل بالإنترنت. علاوة على ذلك، يمكنك أيضًا استخدام بيانات ذاكرة التخزين المؤقت كمتغيرات ومعلمات. وهذا يعني أنه على الرغم من أن التحميل الأول يستغرق بضع ثوانٍ، إلا أن الأوقات اللاحقة من خلال الاستفادة من عمال الخدمة يجب أن تكون أسرع. لذلك، يسمح هذا لـ PWA بالعمل دون اتصال بالإنترنت والتحميل بسرعة.
يمكنك إضافة عامل خدمة إلى موقع الويب الخاص بك عن طريق كتابة الكود بنفسك أو باستخدام أداة مثل Workbox. يمكنك نسخ الكود أدناه. لاستخدام هذا الرمز، قم بإنشاء ملف جديد وقم بتسميته sw.js قبل حفظ التغييرات. يعالج next-pwa إعداد عامل الخدمة، لذلك لا تحتاج إلى إنشاء واحد يدويًا. فقط تأكد من تسجيل عامل الخدمة بشكل صحيح في تطبيقك.
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 * قم بتحديث أو إنشاء next.config.js باستخدام
/** @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,
});
استخدم الكود أدناه في حالة استخدام عامل خدمة مخصص بدلاً من pwa التالي
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;
بعد تشغيل الإصدار التالي، سيؤدي هذا إلى إنشاء ملفين في ملفك العام: Workbox-*.js وsw.js، والذي سيتم تقديمه تلقائيًا بشكل ثابت.
Next.js كموقع ثابت على Github Pages وإنشاء PWAnext-pwa عادةً تعيين output: 'export' في الملف next.config.js عند النشر إلى مواقع ثابتة مثل صفحات GitHub.npx serve@latest outnext export لصالح "الإخراج: التصدير" في next.config.js.
