نحوه استفاده از حرکت چهره برای تعامل با تایپوگرافی – مجله سر و صدا

درباره نویسنده

ادواردو یک توسعه دهنده وب در Chialab است. او علاقه خود را برای تایپوگرافی و دستیابی به کار بر روی محصولات مختلف EdTech و برخی از موسسات developed
بیشتر در مورد
ادواردو
…

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

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

Tensorflow چیست؟

Tensorflow یک پلت فرم منبع باز از Google برای یادگیری ماشین است. یادگیری ماشینی یکی از رشته های علوم رایانه است که الگوریتم هایی را مطالعه می کند که یاد می گیرند روابط پیچیده و الگوهای تکراری را از تصاویر ، آهنگ های صوتی ، سری های زمانی ، متن طبیعی و به طور کلی تشخیص دهند. این الگوریتم ها مدل های ریاضی (که مدل های آموزش دیده نیز نامیده می شوند) تولید می کنند ، که نوعی طرحواره هستند که می توانند براساس تصمیمات داده ها بر اساس داده های ورودی تصمیم گیری کنند. اگر دوست دارید به این موضوع نزدیک شوید ، چارلی جرارد در مورد ML برای توسعه دهندگان frontend مطلب نوشت در اینجا Smashing Mag.

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

مدل های Tensorflow برای استفاده در وب در دسترس هستند جاوا اسکریپت SDK.

برپایی

برای شروع استفاده از الگوریتم های تشخیص چهره ، باید چند مرحله را دنبال کنیم:

• SDK Tensorflow را بارگیری کنید.
• کتابخانه Facemesh را که حاوی مدل ریاضی است بارگیری کنید.
• به دوربین کاربر دسترسی پیدا کنید و آن را به یک عنصر ویدیویی HTML منتقل کنید. Facemesh برای تشخیص وجود چهره ، قابها را از برچسب ویدیو تجزیه و تحلیل می کند.

در این پروژه ها ما قصد داریم از Tensorflow از طریق CDN استفاده کنیم ، اما اگر روش bundler را ترجیح دهید در NPM نیز موجود است:

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script>

Tensorflow کلاهبرداری را انجام نمی دهد ، بنابراین ما باید اضافه کنیم فیسمش، کتابخانه ای که در بالای چارچوب ML ساخته شده و یک مدل آموزش دیده برای شناسایی چهره را ارائه می دهد:

<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/facemesh"></script>

مرحله بعدی راه اندازی کتابخانه Facemesh به منظور بارگذاری مدل آموزش دیده و تعریف عملکردی است که داده های چهره را از یک جریان ویدیویی ارزیابی می کند:

// create and place the video
const video = document.createElement('video');
document.body.appendChild(video);

// setup facemesh
const model = await facemesh.load({
    backend: 'wasm',
    maxFaces: 1,
});

async function detectFaces() {
    const faces = await model.estimateFaces(video);
    console.log(faces);

    // recursively detect faces
    requestAnimationFrame(detectFaces);
}

اکنون آماده ایم که از کاربر اجازه دسترسی به جریان دوربین خود را با استفاده از برچسب ویدیو بخواهیم:

// enable autoplay
video.setAttribute('autoplay', '');
video.setAttribute('muted', '');
video.setAttribute('playsinline', '');
// start face detection when ready
video.addEventListener('canplaythrough', detectFaces);
// stream the camera
video.srcObject = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
        facingMode: 'user',
    },
});
// let’s go!
video.play();

navigator.mediaDevices.getUserMedia روش اجازه را فوری می کند و شروع به پخش جریانی دوربین در عنصر ویدیو می کند. پس از پذیرش ، دوربین شروع به پخش برچسب ویدیو می کند ، در حالی که کنسول مرورگر اطلاعات چهره شناسایی شده توسط Facemesh را ثبت می کند.

لطفا توجه داشته باشید که مجوزهای دوربین به اتصال https یا localhost ایمن نیاز دارند: شما نمی توانید به سادگی فایل index.html را باز کنید. اگر مطمئن نیستید که چطور می شود صندوق پرداخت سرور محلی را تنظیم کنید سرور http برای Node یا دنبال کنید این راهنما برای پایتون یا این یکی برای PHP.

مورد 1. تایپوگرافی را با استفاده از دوربین گوشی هوشمند تنظیم کنید

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

تشخیص چهره به معنای تشخیص موقعیت چشم است. ما می توانیم از داده های ارائه شده توسط Facemesh برای محاسبه اندازه صورت خود در رابطه با کل تصویر گرفته شده توسط دوربین استفاده کنیم. می توانیم فرض کنیم که هرچه صورت ما بزرگتر باشد ، به صفحه نمایش نزدیکتریم. ما می توانیم مقیاس 0 (یک بازو با فاصله از هم فاصله داشته باشیم – صورت تقریباً نیمی از دوربین را اشغال می کند) تا 1 (چسبیده به صفحه) و می توان مقدار فعلی را با تقسیم بخش ها تشخیص داد:

async function detectFaces() {
    const faces = await model.estimateFaces(video);
    if (faces.length === 0) {
        // is somebody out there?
        return requestAnimationFrame(detectFaces);
    }

    const [face] = faces;

    // extract face surface corners
    let { bottomRight, topLeft} = face.boundingBox;

    // calculate face surface size
    let width = bottomRight[0] - topLeft[0];
    let height = bottomRight[1] - topLeft[1];
    let videoWidth = video.videoWidth;
    let videoHeight = video.videoHeight;
    let adjustWidth = videoWidth / 2;
    let adjustHeight = videoHeight / 2;

    // detect the ratio between face and full camera picture
    let widthRatio = Math.max(Math.min((width - adjustWidth) / (videoWidth - adjustWidth), 1), 0);
    let heightRatio = Math.max(Math.min((height - adjustHeight) / (videoHeight - adjustHeight), 1), 0);
    let ratio = Math.max(widthRatio, heightRatio);


    // recursively detect faces
    requestAnimationFrame(detectFaces);
}

اکنون که محاسبه کردیم ratio، وقت آن است که مقداری جادو اتفاق بیفتد ، مقدار را به صفحه سبک منتقل کنید:

document.documentElement.style.setProperty('--user-distance', ratio);

با این مقدار و کمی حساب می توانیم به راحتی تغییرات کوچکی را در وزن ، اندازه و شاید سبک قلم اعمال کنیم ، اما می توانیم کار را حتی بهتر انجام دهیم. با استفاده از قلم متغیر، یک قلم که دارای اشکال و فضاهای اصطلاحات پارامتر شده است ، ما می توانیم با به روزرسانی تغییر اندازه نوری ، درک هر یک از این حروف را تنظیم کنیم.

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

.main-text {
    --min-opsz: 10;
    --max-opsz: 15;
    --opsz: calc(var(--min-opsz) + (var(--user-distance) * (var(--max-opsz) - var(--min-opsz))));

    ...
    font-family: 'Amstelvar', serif;
    font-variation-settings: 'opsz' var(--opsz);
}

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

مورد شماره 2: تنظیم چیدمان هنگام تغییر تعداد افرادی که به دنبال آن هستند

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

برای اینکه تعداد چهره هایی را که در صفحه سفید مشاهده می کنند به درستی نیاز به چند تغییر در اسکریپت قبلی داشته باشیم. ابتدا باید Facemesh را آموزش دهیم که چندین چهره شناسایی شده را انجام دهد:

const model = await facemesh.load({
    backend: 'wasm',
    maxFaces: 30,
});

و سپس ، باید این شماره را به صفحه سبک منتقل کنیم:

async function detectFaces() {
    const faces = await model.estimateFaces(video);
    document.documentElement.style.setProperty('--watching', faces.length);

    // recursively detect faces
    requestAnimationFrame(detectFace);
}

باز هم ، ما می توانیم از آن مقدار برای افزایش اندازه قلم استفاده کنیم ، اما هدف ما ارائه طرح کاملاً متفاوت است. طرح های شبکه CSS ممکن است در این ماموریت به ما کمک کند. این سند پیش بینی شده یک فرم طولانی با یک کناره است که حاوی تصاویر مرتبط است:

<section>
    <article>
        <h1>...</h1>
        <h2>...</h2>
        <p>...</p>
    </article>
    <aside>
        <img src="https://smashingmagazine.com/2020/10/face-motion-typography/..." alt="https://smashingmagazine.com/2020/10/face-motion-typography/..." />
    </aside>
</section>

و این طرح پیش فرض آن است:

section {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 1em;
    width: 120ch;
    max-width: 100%;
    padding: 1em;
}

section article {
    grid-column: 1 / -5;
}

section aside {
    grid-column: 7 / -1;
}

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

:root {
    --watching: 10;
}

section {
    /** The maximum number of people watching for the default layout */
    --switch: 10;
    /** The default number of columns for the text */
    --text: 8;
    /** The default number of columns for the aside */
    --aside: 4;

    grid-template-columns: repeat(calc(var(--text) + var(--aside)), 1fr);
}

section article {
    /**
     * Kinda magic calculation.
     * When the number of people watching is lower than --switch, it returns -2
     * When the number of people watching is greater than --switch, it returns -1
     * We are going to use this number for negative span calculation
     */
    --layout: calc(min(2, (max(var(--switch), var(--watching)) - var(--switch) + 1)) - 3);
    /**
     * Calculate the position of the end column.
     * When --layout is -1, the calculation just returns -1
     * When --layout is -2, the calculation is lower than -1
     */
    --layout-span: calc((var(--aside) * var(--layout)) + var(--aside) - 1);
    /**
     * Calculate the maximum index of the last column (the one "before" the aside)
     */
    --max-span: calc(-1 * var(--aside) - 1);
    /**
     * get the max between --layout-span and the latest column index.
     * -1 means full width
     * --max-span means default layout
     */
    --span: max(var(--max-span), var(--span));

    grid-column-start: 1;
    grid-column-end: var(--span);
}

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

فراتر از تشخیص چهره

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

از آنجا که خلق و خوی بر نحوه خواندن ، مطالعه و جستجوی اطلاعات تأثیر می گذارد ، با یادگیری ماشینی می توانیم عبارات کاربر را نیز تجزیه و تحلیل کنیم تا از روحیات کاربر از حداقل به چیدمان دقیق تبدیل شود.

سالهاست که ما به استفاده از پرس و جوهای CSS Media برای طراحی وب پاسخگو عادت کرده ایم. با این حال ، اندازه ویوپورت تنها یکی از متغیرهای تجربه کاربر است. اخیراً ، نوع جدیدی از پرس و جو رسانه ای که برای احترام به تنظیمات کاربر طراحی شده است ، مرورگرهایی مانند prefers-color-scheme و prefers-reduced-motion. این به طراحان و توسعه دهندگان راهی می دهد تا گامی به جلو در شیوه های طراحی وب بردارند و به صفحه وب اجازه می دهد تا به جای دستگاه کاربر فقط با کل محیط سازگار شود. در عصر کلان داده ها ، این فرصت را داریم که فراتر از طراحی پاسخگو و انطباقی برویم. صفحات وب ما می توانند سرانجام “از صفحه خارج شوند” و بخشی از تجربه جهانی کاربر شوند. طراحی تعامل تمام این امکانات را در بر خواهد گرفت ، بنابراین ادامه آزمایش در مورد ترکیبات احتمالی بین فناوری و طراحی وب در سالهای بعدی بسیار مهم خواهد بود.

(ra، yk، il)