توضیحات شغل را با هوش مصنوعی به ویدیوی استخدام تبدیل کنید

Summarize this content to 400 words in Persian Lang
با توجه به آمار توسط Genius، 60 درصد از جویندگان کار به دلیل طولانی بودن یا پیچیده بودن فرآیند مصاحبه، کار را ترک می کنند و میانگین فرآیند آن حدود 23 روز طول می کشد.

فرآیند استخدام سنتی وقت گیر و مستعد سوگیری است. به جای مصاحبه با هر داوطلب به صورت جداگانه، می توانید از یک آواتار هوش مصنوعی برای انجام همزمان مصاحبه با همه نامزدها استفاده کنید. به این ترتیب، دیگر نیازی نیست تا 23 روز منتظر بمانید زیرا فرآیند استخدام در دو تا سه روز تکمیل می شود.

این مقاله شما را در ساخت یک آواتار ویدئویی هوش مصنوعی استخدامی راهنمایی می کند که با نامزدهای احتمالی با استفاده از API Simli مصاحبه می کند. این نشان می دهد که چگونه برنامه ای بسازید که می تواند شرح شغل را به مصاحبه های تعاملی تبدیل کند، روند استخدام شما را ساده کند و تجربه نامزد را بهبود بخشد.

پیش نیازها

برای دنبال کردن این آموزش، حتما موارد زیر را داشته باشید:

درک جاوا اسکریپت و React.
Node و Node Package Manager نصب شده است.
یک حساب کاربری سیملی برای شروع، یک حساب کاربری رایگان Simli ایجاد کنید.
یک حساب OpenAI

می توانید کد منبع کامل را در GitHub پیدا کنید.

ایجاد سوالات مصاحبه با OpenAPI

OpenAI API هایی را ارائه می دهد که از یک مدل زبان بزرگ آموزش داده شده بر روی مقادیر زیادی داده برای تولید متن از یک درخواست استفاده می کنند. یکی از این APIها نقطه پایانی تکمیل چت است. با استفاده از این نقطه پایانی و ارائه شرح شغل به عنوان یک اعلان، می توانید سوالات مصاحبه سفارشی ایجاد کنید.

پس از ایجاد سؤالات، مرحله بعدی تبدیل آنها به صدا است تا بتوان آنها را به API SimliClient ارسال کرد، که یک آواتار هوش مصنوعی Lipsynced برای مصاحبه با متقاضی ایجاد می کند. Simli یک تولید کننده ویدیوی هوش مصنوعی است که برای ایجاد آواتارهای هوش مصنوعی ویدیویی، یک API گفتار به ویدیو در اختیار شما قرار می دهد.

همچنین OpenAI یک API صوتی با نقطه پایان گفتار بر اساس مدل TTS (متن به گفتار) خود ارائه می‌کند. این نقطه پایانی گفتار به سه ورودی کلیدی نیاز دارد: مدل، متنی که باید به صوت تبدیل شود و صدا برای تولید صدا. این قابلیت برای تبدیل سوالات ایجاد شده به صوتی استفاده خواهد شد.

در اینجا نحوه عملکرد برنامه آمده است

استخدام کننده شرح شغلی را وارد می کند که به API تکمیل چت OpenAI ارسال می شود.
API لیستی از سوالات مصاحبه را به صورت متنی برمی گرداند.
این سؤالات سپس به نقطه پایانی گفتار فرستاده می شوند و در آنجا به صدا تبدیل می شوند.
در نهایت، صدا به API Simli ارسال می‌شود، که یک آواتار ویدیویی واقعی و همگام‌سازی شده با لب ایجاد می‌کند تا سؤالات را ارائه دهد و یک تجربه مصاحبه تعاملی و جذاب برای داوطلبان ایجاد کند. ## محیط API خود را تنظیم کنید

نقطه پایانی Simli به یک کلید API نیاز دارد که می توانید با ایجاد یک حساب کاربری Simli آن را دریافت کنید. هنگامی که با موفقیت یک حساب ایجاد کردید، به داشبورد نمایه کاربر هدایت می شوید، جایی که می توانید کلید API خود را ایجاد کرده و میزان استفاده از API خود را ردیابی کنید.روی دکمه کپی کلیک کنید و آن را ذخیره کنید.

سپس یک حساب کاربری در OpenAI ایجاد کنید تا کلید API را دریافت کنید. پس از ایجاد یک حساب کاربری، به داشبورد نمایه هدایت خواهید شد. در داشبورد، به بخش کلیدهای API بروید.

در بخش کلیدهای API، روی ایجاد کلید مخفی جدید کلیک کنید، به کلید یک نام بدهید و روی دکمه ایجاد کلید مخفی کلیک کنید.

کلید مخفی شما اکنون ایجاد خواهد شد. حتماً آن را کپی و در مکانی امن ذخیره کنید تا بعداً به راحتی آن را بازیابی کنید.

توجه: API بلادرنگ OpenAI در نسخه بتا است و فقط برای کاربران پولی در دسترس است.

با آماده بودن کلیدهای API خود، می توانید تجربه مصاحبه مبتنی بر هوش مصنوعی خود را ایجاد کنید. مرحله بعدی انتخاب یک آواتار هوش مصنوعی است که با برند و نقش استخدام شما همسو باشد.

انتخاب آواتار هوش مصنوعی برای استخدام

هنگام انتخاب آواتار برای استخدام کننده هوش مصنوعی، تصویر برند مورد نظر و نقشی را که برای آن استخدام می کنید در نظر بگیرید. این آموزش از آواتار 'Franco' استفاده می کند که به طور تصادفی انتخاب شده است. می‌توانید کتابخانه آواتارهای Simli را کاوش کنید تا مناسب نیازهای خود را بیابید.

Simli یک ابزار ایجاد آواتار دارد که به کاربران امکان می دهد با آپلود تصاویر، آواتارهای سفارشی ایجاد کنند. اگر هیچ یک از چهره های موجود مطابق با نیازهای شما نیست، از این ویژگی استفاده کنید.

این هم عکس فرانکو در کادر قرمز:

هنگامی که آواتار خود را انتخاب کردید، بیایید با ساختن یک برنامه Next.js آن را زنده کنیم.

راه اندازی پروژه Next.js

برای شروع، با اجرای دستور زیر یک برنامه Next.js ایجاد کنید:

npx create-next-app@latest interview-simli

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این دستور چند سوال در مورد پیکربندی برنامه Next.js ایجاد می کند. در اینجا پاسخ به هر سوال آمده است:

بعد، به برنامه بروید و وابستگی ها را نصب کنید. دستور زیر را اجرا کنید:

cd recruitment-video-app
npm install simli-client openai github:openai/openai-realtime-api-beta

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

SimliClient ابزاری برای ادغام قابلیت‌های پخش صدا و ویدیوی بلادرنگ در برنامه‌های وب شما با استفاده از WebRTC است.

پس از راه اندازی پروژه، سرور توسعه را اجرا کنید:

npm run dev

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پروژه Next.js شما اکنون باید در اجرا شود http://localhost:3000.

در دایرکتوری ریشه پروژه خود، a ایجاد کنید .env مانند تصویر زیر، اعتبارنامه کلید Simli و OpenAI API را فایل و ذخیره کنید.

NEXT_PUBLIC_SIMLI_API_KEY=”your simli api key”
NEXT_PUBLIC_OPENAI_API_KEY=”your openai api key”

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تعاملات ویدیویی در زمان واقعی با متقاضیان ایجاد کنید

در پروژه خود، به مسیر بروید src/app پوشه، ایجاد یک components پوشه، و ایجاد کنید Interview.js فایل این مؤلفه رابط مصاحبه تعاملی را راه‌اندازی می‌کند که در آن کاربران می‌توانند سؤالات مصاحبه ایجاد شده توسط یک آواتار هوش مصنوعی را آغاز کرده و به آنها پاسخ دهند.

ابتدا باید متغیرهای حالت و مراجعی را که به کنترل و نظارت بر جنبه‌های مختلف مؤلفه کمک می‌کنند، اعلام کنید. برای انجام این کار، قطعه کد زیر را جایگذاری کنید:

// src/app/components/Interview.js
// State management
//…
const [isLoading, setIsLoading] = useState(false);
const [isAvatarVisible, setIsAvatarVisible] = useState(false);
const [error, setError] = useState(“”);
const [isRecording, setIsRecording] = useState(false);
const [userMessage, setUserMessage] = useState(“…”);
// Refs for various components and states
const videoRef = useRef(null);
const audioRef = useRef(null);
const openAIClientRef = useRef(null);
const audioContextRef = useRef(null);
const streamRef = useRef(null);
const processorRef = useRef(null);
// New refs for managing audio chunk delay
const audioChunkQueueRef = useRef([]);
const isProcessingChunkRef = useRef(false);
//…

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این بلوک کد متغیرهای حالت مختلف را برای ردیابی اعلام می کند isLoading، isAvatarVisible، error و userMessage دولتهمچنین چندین ref ایجاد می کند. بیایید ببینیم که هر کدام چه می کنند:

videoRef و audioRef دسترسی مستقیم به عناصر ویدیویی و صوتی را فراهم می کند. آنها برای پیکربندی مورد نیاز هستند SimliClient.

audioContextRef و processorRef پردازش و رمزگذاری صدا را مدیریت کنید، که برای ضبط و ارسال داده های صوتی بسیار مهم است.

audioQueueRef یک بافر برای تکه‌های صوتی است که پخش یکپارچه صدا را با قرار دادن قطعات در صف تا زمانی که آماده ارسال شوند تضمین می‌کند. را SimliClient نیاز به ارسال صوت به صورت تکه‌ای در قالب PCM16 با نرخ نمونه 16 کیلوهرتز دارد.

Simli Client Initialization

حال، بیایید مشتری Simli را مقداردهی اولیه کنیم. قطعه کد زیر را در داخل قرار دهید Interview.js فایل:

// src/app/components/Interview.js
…
// Initializes the Simli client with the provided configuration
…
const initializeSimliClient = useCallback(() => {
if (videoRef.current && audioRef.current) {
const SimliConfig = {
apiKey: process.env.NEXT_PUBLIC_SIMLI_API_KEY,
faceID: simli_faceid,
handleSilence: true,
maxSessionLength: 60, // in seconds
maxIdleTime: 60, // in seconds
videoRef: videoRef,
audioRef: audioRef,
};
simliClient.Initialize(SimliConfig);
console.log(“Simli Client initialized”);
}
}, [simli_faceid]);
//…

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این بلوک کد بالا یک نمونه جدید از را مقداردهی اولیه و پیکربندی می کند SimliClient. بیایید هر قسمت از آن را تجزیه کنیم SimliConfig تابع:

apiKey: این کلید Simli API است.

faceID: نشان دهنده شناسه چهره آواتار است که در جریان ویدیو ارائه می شود.

handleSilence: این بولی نشان می‌دهد که آیا مشتری باید لحظات بی‌صدا را در جریان صوتی مدیریت کند (به عنوان مثال، در صورت عدم شناسایی صدا، ویدیو را قطع یا متوقف می‌کند).

maxSessionLength: حداکثر طول جلسه (بر حسب ثانیه) را تنظیم می کند.

maxIdleTime: حداکثر زمان بیکاری (بر حسب ثانیه) را تنظیم می کند. جلسه بعد از 600 ثانیه (10 دقیقه) بدون فعالیت قطع می شود.

videoRef and audioRef: اینها ارجاعاتی به عناصر ویدیویی و صوتی هستند که در آن جریان های رسانه در مرورگر نمایش داده می شوند.

OpenAI Client Initialization

گام بعدی، راه اندازی اولیه کلاینت OpenAI است. برای انجام این کار، کد زیر را در داخل آن قرار دهید Interview.js فایل:

// src/app/components/Interview.js
…
// Initializes the OpenAI client, sets up event listeners, and connects to the API
…
const initializeOpenAIClient = useCallback(async () => {
try {
console.log(“Initializing OpenAI client…”);
openAIClientRef.current = new RealtimeClient({
apiKey: process.env.NEXT_PUBLIC_OPENAI_API_KEY,
dangerouslyAllowAPIKeyInBrowser: true,
});
await openAIClientRef.current.updateSession({
instructions: initialPrompt,
voice: openai_voice,
turn_detection: { type: “server_vad” },
input_audio_transcription: { model: “whisper-1” },
});
// Set up event listeners
openAIClientRef.current.on(
“conversation.updated”,
handleConversationUpdate
);
openAIClientRef.current.on(“conversation.interrupted”, () => {
interruptConversation();
});
openAIClientRef.current.on(
“input_audio_buffer.speech_stopped”,
handleSpeechStopped
);
// openAIClientRef.current.on(‘response.canceled’, handleResponseCanceled);
await openAIClientRef.current.connect();
console.log(“OpenAI Client connected successfully”);
setIsAvatarVisible(true);
} catch (error) {
console.error(“Error initializing OpenAI client:”, error);
setError(`Failed to initialize OpenAI client: ${error.message}`);
}
}, [initialPrompt]);
//…

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تابع initializeOpenAIClient کلاینت OpenAI را راه اندازی می کند، که مکالمات بلادرنگ با متقاضی را مدیریت می کند. کلاینت با یک کلید API و یک پیام اولیه تنظیم می شود که کاربر را به مصاحبه خوش آمد می گوید. پس از آن، شنوندگان رویداد اضافه می شوند تا اشتباهات و به روز رسانی ها را در مکالمه مدیریت کنند. هنگامی که مشتری پیکربندی شد، isAvatarVisible روی true تنظیم شده است که باعث می شود آواتار در رابط کاربری ظاهر شود.

توجه: تنظیم dangerouslyAllowAPIKeyInBrowser به true به طور کلی برای توسعه یا نمونه سازی است، زیرا کلید OpenAI API شما ممکن است در معرض سمت کلاینت قرار گیرد که آسیب پذیر است. در یک محیط تولید، با ایجاد یک مسیر امن Next.js API، که کلید شما را مخفی نگه می‌دارد، تماس‌های API در سمت سرور بهتر انجام می‌شود.

پردازش و ارسال صدا

باید عملکردی ایجاد کنید تا صدا را به 16 کیلوهرتز کاهش دهید و آن را به قطعات کوچکتر PCM تقسیم کنید. برای این کار کد زیر را داخل آن قرار دهید Interview.js فایل:

// src/app/components/Interview.js
…
// Downsamples audio data from one sample rate to another
…
const downsampleAudio = (
audioData,
inputSampleRate,
outputSampleRate
) => {
if (inputSampleRate === outputSampleRate) {
return audioData;
}
const ratio = inputSampleRate / outputSampleRate;
const newLength = Math.round(audioData.length / ratio);
const result = new Int16Array(newLength);
for (let i = 0; i < newLength; i++) {
const index = Math.round(i * ratio);
result[i] = audioData[index];
}
return result;
};
//…

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ارسال داده های صوتی به Simli

برای ارسال داده های صوتی به SimliClient برای پخش، یک تابع ایجاد خواهید کرد. برای انجام این کار، قطعه کد زیر را جایگذاری کنید:

// src/app/components/Interview.js
…
// Processes the next audio chunk in the queue.
…

const processNextAudioChunk = useCallback(() => {
if (
audioChunkQueueRef.current.length > 0 &&
!isProcessingChunkRef.current
) {
isProcessingChunkRef.current = true;
const audioChunk = audioChunkQueueRef.current.shift();
if (audioChunk) {
const chunkDurationMs = (audioChunk.length / 16000) * 1000; // Calculate chunk duration in milliseconds
// Send audio chunks to Simli immediately
simliClient?.sendAudioData(audioChunk);
console.log(
“Sent audio chunk to Simli:”,
chunkDurationMs,
“Duration:”,
chunkDurationMs.toFixed(2),
“ms”
);
isProcessingChunkRef.current = false;
processNextAudioChunk();
}
}
}, []);
//…

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

را processNextAudioChunk عملکرد بررسی می کند که آیا تکه هایی در آن وجود دارد یا خیر audioQueueRef. اگر چنین است، قطعه بعدی را می گیرد، آن را برای پخش به Simli می فرستد و آن را از صف حذف می کند. این تضمین می‌کند که تنها یک قطعه در یک زمان ارسال می‌شود و تجربه پخش روانی را بدون همپوشانی صدا برای کاربر فراهم می‌کند. سپس به صورت بازگشتی تابع را فراخوانی کنید تا قطعه بعدی در صف پردازش شود.

پاسخ های OpenAI را مدیریت کنید

در مرحله بعد، یک تابع برای مدیریت پاسخ ها از OpenAI API ایجاد می شود.

// src/app/components/Interview.js
…
// Handles conversation updates, including user and assistant messages
…
const handleConversationUpdate = useCallback((event) => {
console.log(“Conversation updated:”, event);
const { item, delta } = event;
if (item.type === “message” && item.role === “assistant”) {
console.log(“Assistant message detected”);
if (delta && delta.audio) {
const downsampledAudio = downsampleAudio(delta.audio, 24000, 16000);
audioChunkQueueRef.current.push(downsampledAudio);
if (!isProcessingChunkRef.current) {
processNextAudioChunk();
}
}
} else if (item.type === “message” && item.role === “user”) {
setUserMessage(item.content[0].transcript);
}
}, []);
//Handles interruptions in the conversation flow.
const interruptConversation = () => {
console.warn(“User interrupted the conversation”);
simliClient?.ClearBuffer();
openAIClientRef.current?.cancelResponse(“”);
};
//…

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کد بالا دو تابع را تعریف می کند: handleConversationUpdate و interruptConversation. را handleConversationUpdate تابع ابتدا بررسی می کند که آیا پیام از دستیار است یا خیر. سپس، بررسی می‌کند که آیا پیام دستیار شامل داده‌های صوتی است یا خیر. اگر درست باشد، از آن استفاده می کند downsampleAudio قابلیت تبدیل صدا به نرخ نمونه پایین تر (24000 هرتز تا 16000 هرتز).

این صدای نمونه برداری شده به آن اضافه شده است audioChunkQueueRef.current، مرجعی برای ذخیره تکه های صوتی. اگر هیچ تکه ای در حال پردازش نباشد، processNextAudioChunk() تابع (که قبلاً اعلام کردیم) برای شروع پردازش قطعات صوتی فراخوانی می شود.

را interruptConversation عملکرد وقفه مکالمه را مدیریت می کند. اگر کاربر مصاحبه کننده را قطع کند، این تابع بافر SimliClient را پاک می کند و پاسخ مداوم از OpenAI API را لغو می کند.

ضبط صدا

در مرحله بعد، بیایید توابعی را ایجاد کنیم تا زمانی که نامزد احتمالی در حال صحبت کردن است، ضبط صدا را کنترل کند. کد زیر را قرار دهید:

// src/app/components/Interview.js
…
// Starts audio recording from the user’s microphone
…

const startRecording = useCallback(async () => {
if (!audioContextRef.current) {
audioContextRef.current = new AudioContext({ sampleRate: 24000 });
}
try {
console.log(“Starting audio recording…”);
streamRef.current = await navigator.mediaDevices.getUserMedia({
audio: true,
});
const source = audioContextRef.current.createMediaStreamSource(
streamRef.current
);
processorRef.current = audioContextRef.current.createScriptProcessor(
2048,
1,
1
);
processorRef.current.onaudioprocess = (e) => {
const inputData = e.inputBuffer.getChannelData(0);
const audioData = new Int16Array(inputData.length);
let sum = 0;
for (let i = 0; i < inputData.length; i++) {
const sample = Math.max(-1, Math.min(1, inputData[i]));
audioData[i] = Math.floor(sample * 32767);
sum += Math.abs(sample);
}
openAIClientRef.current?.appendInputAudio(audioData);
};
source.connect(processorRef.current);
processorRef.current.connect(audioContextRef.current.destination);
setIsRecording(true);
console.log(“Audio recording started”);
} catch (err) {
console.error(“Error accessing microphone:”, err);
setError(“Error accessing microphone. Please check your permissions.”);
}
}, []);

// Stops audio recording from the user’s microphone

const stopRecording = () => { const stopRecording = useCallback(() => {
if (processorRef.current) {
processorRef.current.disconnect();
processorRef.current = null;
}
if (streamRef.current) {
streamRef.current.getTracks().forEach((track) => track.stop());
streamRef.current = null;
}
setIsRecording(false);
console.log(“Audio recording stopped”);
}, []);
//…

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در اینجا چیزی است که هر تابع انجام می دهد:

startRecording:

درخواست دسترسی به میکروفون، ایجاد یک زمینه صوتی و پخش جریانی داده های صوتی.
داده های صوتی ضبط می شود، برای سازگاری به فرمت PCM تبدیل می شود و برای پردازش به مشتری OpenAI ارسال می شود.

stopRecording: زمینه صوتی را می بندد و پردازنده را قطع می کند.

شروع و توقف تعامل

// src/app/components/Interview.js
…
// Handles starting the interaction
…
const handleStart = useCallback(async () => {
setIsLoading(true);
setError(“”);
try {
await simliClient?.start();
await initializeOpenAIClient();
} catch (error) {
console.error(“Error starting interaction:”, error);
setError(`Error starting interaction: ${error.message}`);
} finally {
setIsAvatarVisible(true);
setIsLoading(false);
}
}, [initializeOpenAIClient]);

// Handles stopping the interaction, cleaning up resources and resetting states.

const handleStop = useCallback(() => {
console.log(“Stopping interaction…”);
setIsLoading(false);
setError(“”);
stopRecording();
setIsAvatarVisible(false);
simliClient?.close();
openAIClientRef.current?.disconnect();
if (audioContextRef.current) {
audioContextRef.current.close();
}
stopRecording();
onClose();
console.log(“Interaction stopped”);
}, [stopRecording]);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در کد بالا، handleStart تابع با راه‌اندازی کلاینت‌های لازم و آماده‌سازی رابط برای ضبط، تعامل را راه‌اندازی می‌کند. با تماس با simliClient?.start() روش، SimliClient یک دست دادن WebRTC را برای مذاکره در مورد ارتباط بین مشتری و سرور Simli آغاز می کند.

را handleStop تابع با فراخوانی این تعامل را متوقف می کند simliClient?.close() روش، پاکسازی منابع استفاده شده، مانند اتصالات کلاینت، و به روز رسانی حالت های بارگذاری و مشاهده آواتار.

نصب و پاکسازی کامپوننت

در نهایت، برای این مؤلفه، باید مقدار را مقداردهی اولیه کنیم simliClient هنگامی که جزء سوار می شود. کد زیر را قرار دهید:

// src/app/components/Interview.js
…
// Effect to initialize Simli client once the component mounts and clean up resources on unmount
…

useEffect(() => {
initializeSimliClient();
if (simliClient) {
simliClient?.on(“connected”, () => {
console.log(“SimliClient connected”);
const audioData = new Uint8Array(6000).fill(0);
simliClient?.sendAudioData(audioData);
console.log(“Sent initial audio data”);
startRecording();
});
simliClient?.on(“disconnected”, () => {
console.log(“SimliClient disconnected”);
});
}
return () => {
try {
simliClient?.close();
openAIClientRef.current?.disconnect();
if (audioContextRef.current) {
audioContextRef.current.close();
}
} catch {}
};
}, [initializeSimliClient]);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این useEffect قلاب را مقداردهی اولیه می کند simliClient هنگامی که کامپوننت نصب می شود، شنوندگان رویداد را برای زمانی که متصل یا قطع می شود تنظیم کنید. هنگام اتصال، یک سیگنال صوتی بی صدا برای زنده نگه داشتن اتصال ارسال می کند و شروع به ضبط صدا می کند. عملکرد پاکسازی، که با جدا کردن کامپوننت فعال می شود، بسته می شود simliClient، و کلاینت OpenAI را قطع می کند.

بعد، به مسیر بروید src/app/pages.js فایل و کد زیر را قرار دهید:

// src/app/components/Interview.js
…
// configure the avatar and display the home page
…
“use client”;
import React, { useState, useEffect } from “react”;
import Interview from “./components/Interview”;

const Demo = () => {
const [jobDescription, setJobDescription] = useState(“”);
const avatar = {
name: “Frank”,
openai_voice: “alloy”,
simli_faceid: “5514e24d-6086-46a3-ace4-6a7264e5cb7c”,
initialPrompt: `Your name is Frank, an interviewer hiring for a specific role. You are looking for a candidate whose expertise aligns closely with the following job description: ${jobDescription}. Please generate three interview questions that assess key qualifications and relevant experience. Begin by introducing yourself and asking the interviewee to share a bit about their background.`,
};
return (
<div className=”bg-black min-h-screen flex flex-col items-center font-abc-repro font-normal text-sm text-white p-8″>
<div className=”flex flex-col items-center mt-4″>
<label htmlFor=”job-description” className=”font-bold mb-2″>
Add Job Description
</label>
<textarea
id=”job-description”
placeholder=”Enter job description, e.g., Responsibilities, Requirements”
value={jobDescription}
onChange={(e) => setJobDescription(e.target.value)}
className=”p-2 border border-gray-300 rounded-md w-80 h-24 resize-none mb-4 text-black”
/>
</div>
<div className=”flex flex-col items-center gap-6 bg-effect15White p-6 pb-[40px] rounded-xl w-full”>
<div>
<Interview
openai_voice={avatar.openai_voice}
simli_faceid={avatar.simli_faceid}
initialPrompt={avatar.initialPrompt}
/>
</div>
</div>
</div>
);
};
export default Demo;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این کد ورودی شرح شغل را از استخدام‌کننده کنترل می‌کند و آن را به درخواست اولیه، شناسه چهره و صدای OpenAI که باید به OpenAI API ارسال شود، ارسال می‌کند. سپس، آن را به عنوان تکیه گاه به منتقل می شود Interview.js. جزء

نتیجه نهایی

برای آزمایش برنامه، کاربر شرح شغل را در یک ناحیه متنی وارد می کند که OpenAI API آن را پردازش می کند. OpenAI API از این اعلان برای ایجاد سه سوال برای آواتار استفاده می کند تا از متقاضی بپرسد. در اینجا لینک ویدیو برای مشاهده نحوه عملکرد برنامه آمده است:

نتیجه گیری

با استفاده از SimliClient و OpenAI، این راهنما با ساختن برنامه‌ای که شرح شغل ثابت را به ویدئوهای مصاحبه تعاملی و پویا تبدیل می‌کند، راه‌حلی جامع برای مشکل استخدام وقت‌گیر ارائه می‌دهد. ترکیب این ابزارها یک تغییر بازی است زیرا با هم می توان از آنها برای خودکارسازی فرآیند غربالگری اولیه نامزدها و کاهش استرس ناشی از گذراندن فرآیند استخدام سنتی استفاده کرد.

API Simli با یک طرح رایگان ارائه می شود. برای شروع امروز در Simli ثبت نام کنید.

npx create-next-app@latest interview-simli

cd recruitment-video-app
npm install simli-client openai github:openai/openai-realtime-api-beta

npm run dev

NEXT_PUBLIC_SIMLI_API_KEY="your simli api key"
NEXT_PUBLIC_OPENAI_API_KEY="your openai api key"

// src/app/components/Interview.js
// State management
//...
const [isLoading, setIsLoading] = useState(false);
const [isAvatarVisible, setIsAvatarVisible] = useState(false);
const [error, setError] = useState("");
const [isRecording, setIsRecording] = useState(false);
const [userMessage, setUserMessage] = useState("...");
// Refs for various components and states
const videoRef = useRef(null);
const audioRef = useRef(null);
const openAIClientRef = useRef(null);
const audioContextRef = useRef(null);
const streamRef = useRef(null);
const processorRef = useRef(null);
// New refs for managing audio chunk delay
const audioChunkQueueRef = useRef([]);
const isProcessingChunkRef = useRef(false);
//...

// src/app/components/Interview.js
...
// Initializes the Simli client with the provided configuration
...
const initializeSimliClient = useCallback(() => {
   if (videoRef.current && audioRef.current) {
     const SimliConfig = {
       apiKey: process.env.NEXT_PUBLIC_SIMLI_API_KEY,
       faceID: simli_faceid,
       handleSilence: true,
       maxSessionLength: 60, // in seconds
       maxIdleTime: 60, // in seconds
       videoRef: videoRef,
       audioRef: audioRef,
     };
     simliClient.Initialize(SimliConfig);
     console.log("Simli Client initialized");
   }
 }, [simli_faceid]);
//...

// src/app/components/Interview.js
...
// Initializes the OpenAI client, sets up event listeners, and connects to the API
...
const initializeOpenAIClient = useCallback(async () => {
  try {
    console.log("Initializing OpenAI client...");
    openAIClientRef.current = new RealtimeClient({
      apiKey: process.env.NEXT_PUBLIC_OPENAI_API_KEY,
      dangerouslyAllowAPIKeyInBrowser: true,
    });
    await openAIClientRef.current.updateSession({
      instructions: initialPrompt,
      voice: openai_voice,
      turn_detection: { type: "server_vad" },
      input_audio_transcription: { model: "whisper-1" },
    });
    // Set up event listeners
    openAIClientRef.current.on(
      "conversation.updated",
      handleConversationUpdate
    );
    openAIClientRef.current.on("conversation.interrupted", () => {
      interruptConversation();
    });
    openAIClientRef.current.on(
      "input_audio_buffer.speech_stopped",
      handleSpeechStopped
    );
    // openAIClientRef.current.on('response.canceled', handleResponseCanceled);
    await openAIClientRef.current.connect();
    console.log("OpenAI Client connected successfully");
    setIsAvatarVisible(true);
  } catch (error) {
    console.error("Error initializing OpenAI client:", error);
    setError(`Failed to initialize OpenAI client: ${error.message}`);
  }
}, [initialPrompt]);
//...

// src/app/components/Interview.js
...
// Downsamples audio data from one sample rate to another
...
const downsampleAudio = (
  audioData,
  inputSampleRate,
  outputSampleRate
) => {
  if (inputSampleRate === outputSampleRate) {
    return audioData;
  }
  const ratio = inputSampleRate / outputSampleRate;
  const newLength = Math.round(audioData.length / ratio);
  const result = new Int16Array(newLength);
  for (let i = 0; i < newLength; i++) {
    const index = Math.round(i * ratio);
    result[i] = audioData[index];
  }
  return result;
 };
 //...

// src/app/components/Interview.js
...
// Processes the next audio chunk in the queue.
...

const processNextAudioChunk = useCallback(() => {
  if (
    audioChunkQueueRef.current.length > 0 &&
    !isProcessingChunkRef.current
  ) {
    isProcessingChunkRef.current = true;
    const audioChunk = audioChunkQueueRef.current.shift();
    if (audioChunk) {
      const chunkDurationMs = (audioChunk.length / 16000) * 1000; // Calculate chunk duration in milliseconds
      // Send audio chunks to Simli immediately
      simliClient?.sendAudioData(audioChunk);
      console.log(
        "Sent audio chunk to Simli:",
        chunkDurationMs,
        "Duration:",
        chunkDurationMs.toFixed(2),
        "ms"
      );
      isProcessingChunkRef.current = false;
      processNextAudioChunk();
    }
  }
 }, []);
//...

// src/app/components/Interview.js
...
// Handles conversation updates, including user and assistant messages
...
const handleConversationUpdate = useCallback((event) => {
  console.log("Conversation updated:", event);
  const { item, delta } = event;
  if (item.type === "message" && item.role === "assistant") {
    console.log("Assistant message detected");
    if (delta && delta.audio) {
      const downsampledAudio = downsampleAudio(delta.audio, 24000, 16000);
      audioChunkQueueRef.current.push(downsampledAudio);
      if (!isProcessingChunkRef.current) {
        processNextAudioChunk();
      }
    }
  } else if (item.type === "message" && item.role === "user") {
    setUserMessage(item.content[0].transcript);
  }
 }, []);
//Handles interruptions in the conversation flow.
const interruptConversation = () => {
  console.warn("User interrupted the conversation");
  simliClient?.ClearBuffer();
  openAIClientRef.current?.cancelResponse("");
};
//...

// src/app/components/Interview.js
...
// Starts audio recording from the user's microphone
...

const startRecording = useCallback(async () => {
   if (!audioContextRef.current) {
     audioContextRef.current = new AudioContext({ sampleRate: 24000 });
   }
   try {
     console.log("Starting audio recording...");
     streamRef.current = await navigator.mediaDevices.getUserMedia({
       audio: true,
     });
     const source = audioContextRef.current.createMediaStreamSource(
       streamRef.current
     );
     processorRef.current = audioContextRef.current.createScriptProcessor(
            2048,
            1,
            1
          );
     processorRef.current.onaudioprocess = (e) => {
       const inputData = e.inputBuffer.getChannelData(0);
       const audioData = new Int16Array(inputData.length);
       let sum = 0;
       for (let i = 0; i < inputData.length; i++) {
         const sample = Math.max(-1, Math.min(1, inputData[i]));
         audioData[i] = Math.floor(sample * 32767);
         sum += Math.abs(sample);
       }
       openAIClientRef.current?.appendInputAudio(audioData);
     };
     source.connect(processorRef.current);
          processorRef.current.connect(audioContextRef.current.destination);
     setIsRecording(true);
     console.log("Audio recording started");
   } catch (err) {
     console.error("Error accessing microphone:", err);
     setError("Error accessing microphone. Please check your permissions.");
   }
 }, []);

// Stops audio recording from the user's microphone

const stopRecording = () => { const stopRecording = useCallback(() => {
   if (processorRef.current) {
     processorRef.current.disconnect();
     processorRef.current = null;
   }
   if (streamRef.current) {
     streamRef.current.getTracks().forEach((track) => track.stop());
     streamRef.current = null;
   }
   setIsRecording(false);
   console.log("Audio recording stopped");
 }, []);
//...

// src/app/components/Interview.js
...
// Handles starting the interaction
...
const handleStart = useCallback(async () => {
  setIsLoading(true);
  setError("");
  try {
    await simliClient?.start();
    await initializeOpenAIClient();
  } catch (error) {
     console.error("Error starting interaction:", error);
     setError(`Error starting interaction: ${error.message}`);
  } finally {
     setIsAvatarVisible(true);
     setIsLoading(false);
        }
      }, [initializeOpenAIClient]);

      // Handles stopping the interaction, cleaning up resources and resetting states.

const handleStop = useCallback(() => {
  console.log("Stopping interaction...");
  setIsLoading(false);
  setError("");
  stopRecording();
  setIsAvatarVisible(false);
  simliClient?.close();
  openAIClientRef.current?.disconnect();
  if (audioContextRef.current) {
    audioContextRef.current.close();
  }
  stopRecording();
  onClose();
  console.log("Interaction stopped");
 }, [stopRecording]);

// src/app/components/Interview.js
...
// Effect to initialize Simli client once the component mounts and clean up resources on unmount
... 

useEffect(() => {
  initializeSimliClient();
  if (simliClient) {
    simliClient?.on("connected", () => {
      console.log("SimliClient connected");
      const audioData = new Uint8Array(6000).fill(0);
      simliClient?.sendAudioData(audioData);
      console.log("Sent initial audio data");
      startRecording();
    });
    simliClient?.on("disconnected", () => {
      console.log("SimliClient disconnected");
    });
  }
  return () => {
    try {
      simliClient?.close();
      openAIClientRef.current?.disconnect();
      if (audioContextRef.current) {
        audioContextRef.current.close();
      }
    } catch {}
  };
}, [initializeSimliClient]);

// src/app/components/Interview.js
...
// configure the avatar and display the home page
... 
"use client";
import React, { useState, useEffect } from "react";
import Interview from "./components/Interview";

const Demo = () => {
  const [jobDescription, setJobDescription] = useState("");
  const avatar = {
    name: "Frank",
    openai_voice: "alloy",
    simli_faceid: "5514e24d-6086-46a3-ace4-6a7264e5cb7c",
    initialPrompt: `Your name is Frank, an interviewer hiring for a specific role. You are looking for a candidate whose expertise aligns closely with the following job description: ${jobDescription}. Please generate three interview questions that assess key qualifications and relevant experience. Begin by introducing yourself and asking the interviewee to share a bit about their background.`,
  };
  return (
    <div className="bg-black min-h-screen flex flex-col items-center font-abc-repro font-normal text-sm text-white p-8">
      <div className="flex flex-col items-center mt-4">
        <label htmlFor="job-description" className="font-bold mb-2">
              Add Job Description
        </label>
        <textarea
              id="job-description"
              placeholder="Enter job description, e.g., Responsibilities, Requirements"
              value={jobDescription}
              onChange={(e) => setJobDescription(e.target.value)}
              className="p-2 border border-gray-300 rounded-md w-80 h-24 resize-none mb-4 text-black"
            />
      </div>
      <div className="flex flex-col items-center gap-6 bg-effect15White p-6 pb-[40px] rounded-xl w-full">
        <div>
          <Interview
            openai_voice={avatar.openai_voice}
            simli_faceid={avatar.simli_faceid}
            initialPrompt={avatar.initialPrompt}
          />
        </div>
      </div>
    </div>
  );
};
export default Demo;