{"id":1281,"date":"2024-10-09T12:40:25","date_gmt":"2024-10-09T12:40:25","guid":{"rendered":"https:\/\/zahiralam.com\/blog\/?p=1281"},"modified":"2024-10-10T10:31:46","modified_gmt":"2024-10-10T10:31:46","slug":"install-facepoke-on-ubuntu-24-04-real-time-face-morphing-made-easy","status":"publish","type":"post","link":"https:\/\/zahiralam.com\/blog\/install-facepoke-on-ubuntu-24-04-real-time-face-morphing-made-easy\/","title":{"rendered":"Install FacePoke on Ubuntu 24.04: Real-time Face Morphing Made Easy"},"content":{"rendered":"\n<p> I&#8217;ll walk you through the installation and setup process of FacePoke on Ubuntu 24.04. FacePoke is a real-time head transformation app based on the LivePortrait project, providing an interactive experience with advanced face transformation features. Running it locally ensures the best performance, especially if you have access to an <strong>NVIDIA GPU<\/strong> with CUDA 12.4.\n\n\n\n<h3 class=\"wp-block-heading\">Before You Begin<\/h3>\n\n\n\n<p>FacePoke has been tested with <strong>Python 3.10<\/strong> and <strong>CUDA 12.4<\/strong>, making a Linux environment with these prerequisites ideal. The instructions below are intended for setting up FacePoke on Ubuntu 24.04.\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Clone the FacePoke Repository<\/h3>\n\n\n\n<p>The first step is to clone the FacePoke repository from GitHub.\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-1\">git clone https:\/\/github.com\/jbilcke-hf\/FacePoke.git\ncd FacePoke<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#git%20clone%20https%3A%2F%2Fgithub.com%2Fjbilcke-hf%2FFacePoke.git%0Acd%20FacePoke\">\n                            <button class=\"copy-button\" data-label=\"git clone https:\/\/github.com\/jbilcke-hf\/FacePoke.git\ncd FacePoke\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Set Up Python Virtual Environment<\/h3>\n\n\n\n<p>To manage dependencies and keep your environment clean, create and activate a Python virtual environment. FacePoke has been tested with Python 3.10, so you&#8217;ll need this version of Python installed on your system.\n\n\n\n<h4 class=\"wp-block-heading\">2.1 Install Python 3.10<\/h4>\n\n\n\n<p>If you haven&#8217;t installed Python 3.10 yet, do so by running the following commands:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-2\">sudo apt update\nsudo apt install python3.10 python3.10-venv python3.10-dev<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#sudo%20apt%20update%0Asudo%20apt%20install%20python3.10%20python3.10-venv%20python3.10-dev\">\n                            <button class=\"copy-button\" data-label=\"sudo apt update\nsudo apt install python3.10 python3.10-venv python3.10-dev\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<h4 class=\"wp-block-heading\">2.2 Create and Activate Virtual Environment<\/h4>\n\n\n\n<p>Once Python 3.10 is installed, create a virtual environment and activate it:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-3\">python3.10 -m venv venv\nsource venv\/bin\/activate<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#python3.10%20-m%20venv%20venv%0Asource%20venv%2Fbin%2Factivate\">\n                            <button class=\"copy-button\" data-label=\"python3.10 -m venv venv\nsource venv\/bin\/activate\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<h4 class=\"wp-block-heading\">2.3 Upgrade pip, setuptools, and wheel<\/h4>\n\n\n\n<p>Make sure you have the latest versions of <code>pip<\/code>, <code>setuptools<\/code>, and <code>wheel<\/code>:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-4\">pip install --upgrade pip setuptools wheel<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#pip%20install%20--upgrade%20pip%20setuptools%20wheel\">\n                            <button class=\"copy-button\" data-label=\"pip install --upgrade pip setuptools wheel\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<h4 class=\"wp-block-heading\">2.4 Install Python Dependencies<\/h4>\n\n\n\n<p>Now that your environment is set up, install the required Python dependencies from the <code>requirements.txt<\/code> file:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-5\">pip install -r requirements.txt<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#pip%20install%20-r%20requirements.txt\">\n                            <button class=\"copy-button\" data-label=\"pip install -r requirements.txt\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Set Up the Frontend (JavaScript)<\/h3>\n\n\n\n<p>The frontend of FacePoke is managed using Bun, a fast JavaScript runtime. You&#8217;ll need to install it and use it to handle the frontend dependencies.\n\n\n\n<h4 class=\"wp-block-heading\">3.1 Install Bun<\/h4>\n\n\n\n<p>To install Bun, first download and set it up:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-6\">sudo apt install unzip\ncurl -fsSL https:\/\/bun.sh\/install | bash<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#sudo%20apt%20install%20unzip%0Acurl%20-fsSL%20https%3A%2F%2Fbun.sh%2Finstall%20%7C%20bash\">\n                            <button class=\"copy-button\" data-label=\"sudo apt install unzip\ncurl -fsSL https:\/\/bun.sh\/install | bash\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>After installation, add Bun to your system\u2019s PATH:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-7\">export PATH=&quot;$HOME\/.bun\/bin:$PATH&quot;<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#export%20PATH%3D%22%24HOME%2F.bun%2Fbin%3A%24PATH%22\">\n                            <button class=\"copy-button\" data-label=\"export PATH=&quot;$HOME\/.bun\/bin:$PATH&quot;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>Verify the installation by checking the version of Bun:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-8\">bun --version<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#bun%20--version\">\n                            <button class=\"copy-button\" data-label=\"bun --version\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<h4 class=\"wp-block-heading\">3.2 Install Frontend Dependencies<\/h4>\n\n\n\n<p>Next, navigate to the <code>client<\/code> folder and install the required frontend dependencies using Bun:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-9\">cd client\nbun install<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#cd%20client%0Abun%20install\">\n                            <button class=\"copy-button\" data-label=\"cd client\nbun install\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<h4 class=\"wp-block-heading\">3.3 Build the Frontend<\/h4>\n\n\n\n<p>Once the dependencies are installed, build the frontend:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-10\">bun build .\/src\/index.tsx --outdir ..\/public\/<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#bun%20build%20.%2Fsrc%2Findex.tsx%20--outdir%20..%2Fpublic%2F\">\n                            <button class=\"copy-button\" data-label=\"bun build .\/src\/index.tsx --outdir ..\/public\/\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Run the Backend<\/h3>\n\n\n\n<p>Return to the root directory of FacePoke and start the backend server:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-11\">cd ..\npython app.py<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#cd%20..%0Apython%20app.py\">\n                            <button class=\"copy-button\" data-label=\"cd ..\npython app.py\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Access the Application<\/h3>\n\n\n\n<p>Once the backend server is running, you can access FacePoke by opening your web browser and navigating to:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-12\">http:\/\/localhost:8080<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#http%3A%2F%2Flocalhost%3A8080\">\n                            <button class=\"copy-button\" data-label=\"http:\/\/localhost:8080\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p>You\u2019ve now successfully installed and configured FacePoke on Ubuntu 24.04. This setup allows you to run the app locally and benefit from its full capabilities, ensuring low latency and optimal performance. If you have any challenges, feel free to consult the official FacePoke GitHub repository or explore ways to improve the app&#8217;s performance by increasing the frame rate or optimizing the head transformation processes.\n\n\n\n<p>By following these steps, you can experiment with real-time head transformations and enjoy the features offered by this innovative app!\n\n\n\n<p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ll walk you through the installation and setup process of FacePoke on Ubuntu 24.04. FacePoke is a real-time head transformation app based on the LivePortrait [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":1287,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[242,243,66],"class_list":["post-1281","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-artificial-intelligence","tag-face-morphing","tag-facepoke","tag-ubuntu-24-04"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/1281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/comments?post=1281"}],"version-history":[{"count":4,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/1281\/revisions"}],"predecessor-version":[{"id":1290,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/1281\/revisions\/1290"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/media\/1287"}],"wp:attachment":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/media?parent=1281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/categories?post=1281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/tags?post=1281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}