<!DOCTYPE html>
<html lang="ja">

<head>
<script src="ggg.js"></script>

	<meta charset="utf-8">
	<title>年齢、性別、人種を変換kaoAC</title>
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<meta content="顔,存在しない顔,顔合成,顔交換,顔生成,AI顔,人工知能顔,kaoAC,ACワークス" name="keywords">
	<meta content="顔の画像をアップロードすれば、AIが年齢、性別、人種を変換します！年齢は、幼年期(0~4歳)・少年期(5~14歳)・青年期(15~24歳)・壮年期(25~44歳)・中年期(45~64歳)・高年期(65歳~)の中からお選びください。性別は男と女、人種は、アジア人・白人・黒人からお選びください。" name="description">

	<!-- CSRF Token -->
	<meta name="csrf-token" content="v61Ypx9xWiHP5JXyMTnPCNvXaI0gsZf2IJ2DW3fh">

	<!-- Favicons -->
	<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA21pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ2MCwgMjAyMC8wNS8xMi0xNjowNDoxNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpEMEI4NjA4NTIzNDQxMUVCOTc3Qzg0RjE3NjFCODc2NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3ODZDRTVCMjI2M0QxMUVCOEZBMDk3QjM2Mjg5QjcxQyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1MzZFMTkwMjI2M0QxMUVCOEZBMDk3QjM2Mjg5QjcxQyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjYwNmVlNWYwLTFhYmEtNDI2Ni1iMjU5LWZmYTRkZDE1Y2ViMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEMEI4NjA4NTIzNDQxMUVCOTc3Qzg0RjE3NjFCODc2NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ppyqj4EAAAKmSURBVHjaxJdPSFRRFMbfm5qIJFRykYvC/oBYEOXG3Altgly0cRGFUgRGREa2MfwzRVlGQmBYlLYoaeGyjZsgahW0qGhhC5OgRUKFRVkZOc/vi6PYeM6buXdedODjjp577znnd++c9yYMPGymPSjFMAA1QVnoHnS6pD/47rrXysDPRqDGJX+3QqugI64bhR7VN2B4pLgiaBcovHTZL+VR/YWYYs79UwKofi+GsTzT6kHhaeIEEJzJ9hZBqOgj2M8zLmDeHrknySWADTnvokOyl5ImcACqcUhgN5Lel8glxEbsFa+hLYp7FkobhbyAanEho2IJHDaC025KF9Rsp3RKfwKont1tAtqguaGt0BohlFbmjEM7QOG3L4HjRnDadWw8BU3i8x1jDu/NIS8CqJ6VvYHWK+4v0CYEn5a5lRiYyGpl7luoGnN/uRI4aQSnXVsITsPn9xgGjblV0FEnAqioTM5+neL+xE0R9FvOmgqptkRZMwVtxpofhRI4ZQSn9eUGFwofMfQba0jyREEEpBKe51qXSpaQ49pygxzvzdd8BM4Ywf88aKzgQuEzhiuGm0TbY49AbnObscE76HYBjWtASKlHK4RNAh3GV4nWY32VciiwQV023KVCeHkCyGwjhmPGwomYlqvZDSGmWZuQXkagx2intK64dqpQIKmM4Sbhs38lgIzY01uMBa+gUY93x7tCTrNWIb5I4Dy0wpjcjYqyrtGFWJfhTi+8wIbIZLtUqXXFZ1Bdvmd6njep53wiKu45aFtKqg9jqvcKLhSycrc0I/EMCczKr5pce4wNGoIEDDH4ml6nuH6SgHW7u4PkrNP4f8QEhhXHA1T/JKno2Ouh8YNmJCWd6Sr0AeITbQhqDpK3g9B9eZHlr+hbbM1hFEXB/7R5AQYAXz6p+sExBTgAAAAASUVORK5CYII="/>
	<link href="https://kaoac.com/assets/frontend/img/apple-touch-icon.png" rel="apple-touch-icon">

	<!-- Bootstrap CSS File -->
	<link href="https://kaoac.com/assets/frontend/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<!-- FONT AWESOME -->
	<link href="https://kaoac.com/assets/frontend/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
	<!-- COMMON CSS Files -->
	<link href="https://kaoac.com/assets/frontend/css/common.css?v=20250512" rel="stylesheet">
	<!-- Jquery CSS Files -->
	<script type="text/javascript" src="https://kaoac.com/assets/frontend/js/jquery-3.5.1.min.js?v=20250628"></script>
	<!-- popper CSS Files -->
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<!-- Bootstrap JS File -->
	<script src="https://kaoac.com/assets/frontend/lib/bootstrap/js/bootstrap.min.js"></script>
	<!-- Main JS File -->
	<script type="text/javascript" src="https://kaoac.com/assets/frontend/js/main.js?v=20250628"></script>
	<link rel="stylesheet" type="text/css" href="https://kaoac.com/assets/frontend/css/brush.css?v=20250628">
	<script type="text/javascript" src="https://kaoac.com/assets/frontend/js/opencv.js"></script>
    <script type="text/javascript" src="https://kaoac.com/assets/frontend/js/simple-undo.js"></script>
    <script type="text/javascript" src="https://kaoac.com/assets/frontend/js/healing.js?v=20250628"></script>
    <script type="text/javascript" src="https://kaoac.com/assets/frontend/js/upload.js?v=20250628160316"></script>

	<!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XJZLJ1QD1F"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-XJZLJ1QD1F');
    </script>

    <script type="text/javascript">
		var wwwroot = "https://kaoac.com";
		var csrf_token = "v61Ypx9xWiHP5JXyMTnPCNvXaI0gsZf2IJ2DW3fh";
	</script>
</head>

<body>
	<!--==========================
Header
============================-->

<script src="https://accounts.google.com/gsi/client" async ></script>

<div id="g_id_onload"
     data-client_id="54469120861-21v1fa7aqbs06q3tki08rd0pvg6g70p4.apps.googleusercontent.com"
     data-context="signin"
     data-ux_mode="popup"
     data-callback="onGoogleOneTapCredential"
     data-itp_support="true">
</div>

<script>
    function onGoogleOneTapCredential(response) {
        $('body').append('<div id="full_page_loading" style="position: fixed;width: 100%;height: 100%;z-index: 99999;background: rgba(255,255,255,.5);top: 0;left: 0;"><img src="/assets/frontend/images/loading.gif" width="128" height="128" style="position: absolute;top: calc(50% - 64px);left: calc(50% - 64px);border-radius: 50%;background: rgba(255,255,255,.8);padding: 20px;"></div>');
        let loginURL = window.location.origin + '/login';
        let redirectURL = 'https://accounts.ac-illust.com/auth/googleonetap';
        window.location.href = redirectURL + '?idToken=' + response.credential + '&serviceURL=' + loginURL + '&lang=jp';
    }
</script>

<script type="text/javascript">
    $.get( "https://accounts.ac-illust.com/get-header?language=jp", function( data ) {
        $(".common-freebie-render").html(data);
    });
</script>
<div class="common-freebie-render" style="min-height: 38px"></div>
<style type="text/css">
    .common-site-links ul li{margin: 0;max-width: 100%}
    .common-site-links .container{max-width: 1440px!important}
    .common-site-links .link-site-affiliate, .common-site-links .google-translate-bar{display: block!important;}
    @media  screen and (max-width: 991px) {
        .common-freebie-render .btn-show-sp-menu{display: block!important;}
    }
</style>
<div id="omega-menu">
    <div id="omega-sidebar" class="d-lg-none d-sm-block">
        <div id="omega-sidebar-header" class="p-2 d-flex align-items-center justify-content-between border-bottom main-border-color border-width-3">
            <a href="#" title="kaoAC" class="mr-2"><img src="https://kaoac.com/assets/frontend/images/kao.png" alt="kaoAC" width="100"></a>
            <button class="btn btn-mobile-close"><i class="fa fa-times" aria-hidden="true"></i></button>
        </div>
        <div id="omega-sidebar-body">
            <script type="text/javascript">
                $.get( "https://accounts.ac-illust.com/get-header-mobile?language=jp", function( data ) {
                    $(".common-freebie-mobile-render").html(data);
                });
            </script>
            <div class="common-freebie-mobile-render"></div>
        </div>
    </div>
    <div id="omega-overlay" class="d-lg-none"></div>
</div>
<style type="text/css">
    .ac-dropdown-apps{position: absolute;will-change: transform;top: 0px;transform: none !important;left: unset!important;top: calc(100% + 8px)!important;right: 0 !important;}
    .ac-dropdown-apps::before{content: "";width: 100%;height: 12px;position: absolute;bottom: 100%;left: 0;background-color: transparent !important;border: none !important;top: unset !important;}
    .ac-apps-button:hover{background: #f5f5f5;}
    .nav a:hover{color: #006496 !important; text-decoration: none;}
    .ac-dropdown-apps::after{display: none;}
    .ac-dropdown-apps{width: unset;}
    .font-size-11 {font-size: 11px;}
    @media  only screen and (max-width: 991px) {
        #header {display: none !important;}
    }
    .on-hover-show-list-apps:hover > .ac-dropdown-apps{display: block;}
</style>
<script type="text/javascript">
    $.get( "https://accounts.ac-illust.com/get-list-apps?language=jp", function( data ) {
        $("div.ac-dropdown-apps.dropdown-menu").html(data);
    });
</script>

<header id="header">
	<div class="d-none d-md-flex align-items-center justify-content-between py-3 container">
		<div class="d-flex flex-wrap align-items-center">
            <a href="https://kaoac.com">
                <img src="https://kaoac.com/assets/frontend/images/kao.png" width="130" alt="kaoAC">
            </a>
            <span class="ml-3" style="font-size: 12px;color: #333333;">年齢・性別・人種をAIで変換<br>「顔AC」</span>
        </div>
        <div class="d-flex align-items-center position-relative">
            <div class="d-flex align-items-center justify-content-sm-center mt-3 mt-sm-0">
                <a href="https://kaoac.com/terms" class="mr-3">利用規約</a>
                <a href="https://kaoac.com/policy" class="mr-3">プライバシーポリシー</a>
                
                <a href="https://acworks.co.jp/" target="_blank" class="mr-3">運営会社</a>
                                    <a class="mr-3" href="https://accounts.ac-illust.com/signup?serviceURL=https://kaoac.com/login">
                        無料登録
                    </a>
                    <a class="mr-3" href="https://accounts.ac-illust.com/login?serviceURL=https://kaoac.com/login">
                        ログイン
                    </a>
                    <div class="position-relative on-hover-show-list-apps">
                        <a class="ac-apps-button d-flex align-items-center justify-content-center p-1 rounded" href="javascript:void(0);" id="dropdownMenuButton" aria-haspopup="true" aria-expanded="false" data-flip="false">
                            <svg width="28" height="28" focusable="false" viewBox="0 0 24 24" fill="gray"><path d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"></path></svg>
                        </a>
                        <div class="ac-dropdown-apps dropdown-menu p-0 m-0 border border shadow-lg" aria-labelledby="dropdownMenuButton"></div>
                    </div>
                            </div>
        </div>
	</div>
</header>

	<main id="main">
		
<div class="banner position-relative">
    <div class="banner-title position-absolute text-white h-100 w-100 text-center justify-content-start px-3 px-md-5 mx-auto top-3 botom-0 left-0 right-0">
        <p class="mt-5" style="font-weight: bold;">AIが年齢、性別、人種を変換 </p>
    </div>
    <img src="https://kaoac.com/assets/frontend/images/header.jpg" alt="Banner" class="w-100 min-height-250 object-cover">
</div>
<div class="bg-f7f9f9 py-3">
    <div class="container">
        <div class="upload max-width-600 mx-auto">
            <div id="upload-box" class="border border-dashed border-width-2 main-border-color position-relative px-3 py-5 rounded text-center">
                <input class="cursor-pointer h-100 p-0 position-absolute right-0 top-0 w-100" accept="image/jpeg, image/png" type="file" id="fileInput" name="file" style="opacity: 0;">
                <label for="fileInput" class="cursor-pointer">
                    <img src="https://kaoac.com/assets/frontend/images/upload.svg" alt="Download" width="45">
                </label>
                <p class="second-color text-center mt-2 font-size-18">ここに画像をドラッグ＆ドロップ</p>
                <strong class="text-dark text-center font-size-20">JPGまたは PNGの画像をアップロードしてください</strong>
                
            </div>
            
        </div>
        <div class="max-width-600 mx-auto mt-3" id="upload-processing" style="display: none">
            <div class="m-auto rounded text-center border-secondary border border-dashed border-width-2 position-relative text-center" style="border: 2px dashed #ccc;">
                <div class="loading mx-auto m-3"><img height="50" src="https://kaoac.com/assets/frontend/images/loading.gif"></div>
            </div>
        </div>
    </div>
</div>
<div id="editor-image" class="bg-f7f9f9" style="display: none;">
    <div class="container">
        <div class="max-width-600 mx-auto">
            <div class="text-center max-width-600">
                <img id="img-res" class="border-secondary border-dashed border-width-2 p-3" width="100%">
            </div>
        </div>
        <div class="max-width-600 mx-auto">
            <form id="form-generate-photo">
                <div class="align-items-center text-center p-2 row" style="justify-content: center;">
                    <input id="input-data" name="data" type="hidden">
                    <input id="input-age" name="age" type="hidden">
                    <input id="input-gender" name="gender" type="hidden">
                    <input id="input-race" name="race" type="hidden">
                    <!-- <input id="input-size" name="size" type="hidden"> -->
                    <div class="dropdown border px-2 py-1 col-md-2 m-1 rounded">
                        <a  class="d-flex align-items-center justify-content-between text-decoration-none text-center" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span id="age-selected" data-text="年齢">年齢</span>
                            <i class="fa fa-caret-down font-size-20 main-color ml-4"></i>
                        </a>
                        <div class="dropdown-menu px-2 py-0 bg-white">
                            <a data-type="age" data-select="04" data-text="幼年期" class="list-unstyled d-flex align-items-center border-bottom dropdown-item px-1 bg-white">
                                <span class="flex-grow-1 text-center" >幼年期</span>
                            </a>
                            <a data-type="age" data-select="514" data-text="少年期" class="list-unstyled d-flex align-items-center border-bottom dropdown-item px-1 bg-white">
                                <span class="flex-grow-1 text-center" >少年期</span>
                            </a>
                            <a data-type="age" data-select="1524" data-text="青年期" class="list-unstyled d-flex align-items-center border-bottom dropdown-item px-1 bg-white">
                                <span class="flex-grow-1 text-center" >青年期</span>
                            </a>
                            <a data-type="age" data-select="2544" data-text="壮年期" class="list-unstyled d-flex align-items-center border-bottom dropdown-item px-1 bg-white">
                                <span class="flex-grow-1 text-center" >壮年期</span>
                            </a>
                            </a>
                            <a data-type="age" data-select="4564" data-text="中年期" class="list-unstyled d-flex align-items-center border-bottom dropdown-item px-1 bg-white">
                                <span class="flex-grow-1 text-center" >中年期</span>
                            </a>
                            <a data-type="age" data-select="65" data-text="高年期" class="list-unstyled d-flex align-items-center border-bottom dropdown-item px-1 bg-white">
                                <span class="flex-grow-1 text-center" >高年期</span>
                            </a>
                        </div>
                    </div>
                    <div class="dropdown border px-2 py-1 col-md-2 m-1 rounded">
                        <a  class="d-flex align-items-center justify-content-between text-decoration-none text-center" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span id="gender-selected" data-text="性別">性別</span>
                            <i class="fa fa-caret-down font-size-20 main-color ml-4"></i>
                        </a>
                        <div class="dropdown-menu px-2 py-0 bg-white" aria-labelledby="選択する">
                            <a data-type="gender" data-select="man" data-text="男性" class="list-unstyled d-flex align-items-center border-bottom dropdown-item px-1 bg-white">
                                <span class="flex-grow-1 text-center" >男性</span>
                            </a>
                            <a data-type="gender" data-select="woman" data-text="女性" class="list-unstyled d-flex align-items-center border-bottom dropdown-item px-1 bg-white">
                                <span class="flex-grow-1 text-center" >女性</span>
                            </a>
                        </div>
                    </div>
                    <div class="dropdown border px-2 py-1 col-md-3 m-1 rounded">
                        <a  class="d-flex align-items-center justify-content-between text-decoration-none text-center" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span id="race-selected" data-text="人種">人種</span>
                            <i class="fa fa-caret-down font-size-20 main-color ml-4"></i>
                        </a>
                        <div class="dropdown-menu px-2 py-0 bg-white" aria-labelledby="選択する">
                            <a data-type="race" data-select="white" data-text="白人" class="list-unstyled d-flex align-items-center border-bottom dropdown-item px-1 bg-white">
                                <span class="flex-grow-1 text-center" >白人</span>
                            </a>
                            <a data-type="race" data-select="black" data-text="黒人" class="list-unstyled d-flex align-items-center border-bottom dropdown-item px-1 bg-white">
                                <span class="flex-grow-1 text-center" >黒人</span>
                            </a>
                            <a data-type="race" data-select="asian" data-text="アジア人" class="list-unstyled d-flex align-items-center border-bottom dropdown-item px-1 bg-white">
                                <span class="flex-grow-1 text-center" >アジア人</span>
                            </a>
                        </div>
                    </div>
                    <!-- <div class="dropdown border px-2 py-1 col-md-2 m-2 rounded">
                        <a  class="d-flex align-items-center justify-content-between text-decoration-none" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span id="size-selected" data-text="サイズ">サイズ</span>
                            <i class="fa fa-caret-down font-size-20 main-color ml-3"></i>
                        </a>
                        <div class="dropdown-menu px-2 py-0 bg-white" aria-labelledby="選択する">
                            <a data-type="size" data-select="0" class="list-unstyled d-flex align-items-center border-bottom dropdown-item px-1 bg-white">
                                <span class="flex-grow-1" >256px</span>
                            </a>
                            <a data-type="size" data-select="1" class="list-unstyled d-flex align-items-center border-bottom dropdown-item px-1 bg-white">
                                <span class="flex-grow-1" >1024px</span>
                            </a>
                        </div>
                    </div> -->
                    <div class="col-md-4 text-center p-0 px-2">
                        <button type="submit" id="btn-generate" class="btn main-btn" style="background-color: #f05923!important;border: solid 1px #f05923!important;white-space: nowrap;" disabled>変換する
                                                                    (<span id="box-limit-upscale">あと<strong>08</strong>回</span>)
                                </button>
                    </div>
                </div>
            </form>
        </div>
        <div class="max-width-600 mx-auto mt-3" id="mix_processing" style="display:none">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
              <p>Error!!! </p>
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="m-auto border-secondary border-dashed rounded p-3 text-center slight-grey">
                <div class="progress">
                    <div class="progress-bar progress-bar-striped bg-success processing-bar progress-bar-animated" role="progressbar" style="width: 0" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <p class="card-text mb-auto">スタイル変換中なので、ちょっとお待ちください。</p>
                <p class="card-text mb-auto"><span class="processing-percent">00</span>％</p>
            </div>
        </div>
    </div>
</div>

<div id="result-container" class="bg-f7f9f9 py-3" style="display: none;">
    <div class="container">
        <div class="max-width-600 mx-auto">
            <div class="text-center max-width-600">
                <img id="img-generate" class="border-secondary border-dashed border-width-2 p-3" width="100%">
            </div>
        </div>
        <div class="mt-3 text-center">
            <button id="btn-resset" onclick="resetForm()" class="btn btn-outline-dark py-1 px-3">リセット</button>
            <a href="" id="btn-download" class="btn main-btn px-3 py-1" style="background-color: #f05923!important;border: solid 1px #f05923!important;" download>ダウンロード</a>
            <a href=https://accounts.ac-illust.com/login?serviceURL=https://kaoac.com/login data-href="https://kaoac.com/editor-ac" target="_blank" id="btn-editor-ac" class="btn btn-outline-dark rounded-30px py-1 font-size-16"><i class="fa fa-pencil-square-o mr-1" aria-hidden="true"></i>この画像を編集</a>
        </div>
    </div>
</div>
<section id="why-us" class="wow fadeIn" style="visibility: visible; animation-name: fadeIn;">
    <div class="container">
        <header class="section-header">
            <h1 class="text-center mt-3">あなたの写真を無料で変換、ダウンロードOK!</h1>
        </header>
    </div>
</section>

<section class="" style="padding:60px 0 10px 0;background-color: #F8F9F9;">
    <div class="container">
        <div class="row feature-item">
            <div class="col-lg-6 wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">
                <img src="https://kaoac.com/assets/frontend/images/image.jpg" class="img-fluid" alt="">
            </div>

            <div class="col-lg-6 wow fadeInUp pt-4 pt-lg-0 order-2 order-lg-1" style="visibility: visible; animation-name: fadeInUp;display: flex;align-items: center;">
                <div class="paragraph-lh">
                    <h4 class="header-lh">AI人工知能が、顔写真を あなたのお好みの年齢、性別、人種に変換。</h4>
                    <p class="pb-2 m-0">顔写真をアップロードして、お好みの顔をお作りください。年齢は、幼年期(0~ 4歳)・少年期(5~14歳)・青年期(15~24歳)・壮年期(25~44歳)・中年期( 45~64歳)・高年期(65歳~)の中からお選びください。性別は男と女、人種は 、アジア人・白人・黒人からお選びください。</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="intro-tech-2" style="padding:60px 0 60px 0;">
	<div class="container">
		<div class="row feature-item">
			<div class="col-lg-6 wow fadeInUp order-1 order-lg-2" style="visibility: visible; animation-name: fadeInUp;">
				<img src="https://kaoac.com/assets/frontend/images/brain.jpg" class="img-fluid" alt="">
			</div>

			<div class="col-lg-6 wow fadeInUp pt-4 pt-lg-0 order-2 order-lg-1" style="visibility: visible; animation-name: fadeInUp;align-items: center;display: flex;">
				<div class="paragraph-lh">
					<h4 class="header-lh">StyleGANで画像のスタイルを学習し、高解像度の画像を生成</h4>
					<p class="pb-2 m-0">
                    StyleGANはAI技術のひとつで、２つの画像を合成したり、高解像度の実在しない人物の顔画像を生成することができる、スタイル変換ネットワークです。
kaoACでは、様々な人種、年齢、性別の顔画像をデータセットとしてStyleGANのネットワークに学習させています。アップロードされた顔画像に、学習した人種や年齢、性別の特徴を合成して、もとの顔を変化させた顔画像を作り出します。
kaoACで生成された顔画像は実在しない人物の顔ですが、実在する人物の顔を学習データとして使用しているため、しわや顔の歪みなども表現され、CGでは得られない極めてリアルな顔画像が作られます。
					</p>
				</div>
			</div>
		</div>
	</div>
</section>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script type="text/javascript">
    var isUnlimited = false;
    var isLoggedIn = false;
            var limit_upscale_per_day = 2;
    
    const generateFastURL = "https://api.kaoac.com/ac-genface-transform-fast";
    const generateURL = "https://i7x6kws4rtxxtu4bwmzo6fslia0delvj.lambda-url.us-west-2.on.aws/ac-genface-transform";
    const uploadURL = "https://kaoac.com/api/upload";
    const uploadURL2 = "https://kaoac.com/api/upload2";
    let generateFile, getUploadURL, reuse = 0;


    $(document).ready(function() {
        const upload = new Upload();
        upload.uploadURL = uploadURL;

        if (!isUnlimited) {
            var upscaletime = getTimeUpscale();
            var leftUpscaleTime = padFormat(Math.max(limit_upscale_per_day - upscaletime, 0));
            $("#box-limit-upscale strong").html(leftUpscaleTime);
        }


        $('.dropdown .dropdown-menu a span').on('click', async function(){
            if (isExceedUsageLimit()) {
				displayUsageLimitError();
				return false;
			}
            let check = true;
            let type = $(this).parent().attr('data-type');
            let value = $(this).parent().attr('data-select');
            let text = $(this).parent().attr('data-text');
            $('#'+type+'-selected').html(text);
            // if (type == "size" && value == "0") {
            //     $('#'+type+'-selected').html("256px");
            // } else if (type == "size" && value == "1") {
            //     $('#'+type+'-selected').html("1024px");
            // }
            $('input[name="'+type+'"]').val(value);
            document.getElementById("btn-generate").disabled = await validateParameters();
        });

        $('input[name="file"]').on('change', async function () {
            let file = this.files[0];
            let fileType = file["type"];
            reuse = 0;
            resetForm()
            if (isExceedUsageLimit()) {
				displayUsageLimitError();
				return false;
			}
            try {
                let error = upload.validateImage(file);
                if (error) {
                    $('<div class="alert alert-danger alert-dismissible fade show" role="alert">\
                    <strong>'+error+'</strong>\
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">\
                        <span aria-hidden="true">&times;</span>\
                    </button>\
                    </div>').insertBefore('#upload-box');
                    $('html, body').animate({
                        scrollTop: $("#upload-box").offset().top - 100
                    }, 1000);
                    throw error;
                }

                document.getElementById("fileInput").disabled = true;
                $("#upload-processing").show();
                
                $('html, body').animate({
                    scrollTop: $("#upload-processing").offset().top - 100
                }, 1000);

                // Fix HEIC
                let base64String = await new Promise(function(readerResolve) {
                    let reader = new FileReader();
                    reader.onload = async function (readerEvent) {
                        let dataUrl = await new Promise(function(imageResolve) {
                            var image = new Image();
                            image.onload = async function () {
                                var canvas = document.createElement('canvas'),
                                    max_size = 1000,
                                    width = image.width,
                                    height = image.height;
                                if (width > height) {
                                    if (width > max_size) {
                                        height *= max_size / width;
                                        width = max_size;
                                    }
                                } else {
                                    if (height > max_size) {
                                        width *= max_size / height;
                                        height = max_size;
                                    }
                                }
                                canvas.width = width;
                                canvas.height = height;
                                canvas.getContext('2d').drawImage(image, 0, 0, width, height);
                                let dataUrl = canvas.toDataURL('image/jpeg');
                                imageResolve(dataUrl);
                            }
                            image.src = readerEvent.target.result;
                        });
                        readerResolve(dataUrl);
                    }
                    reader.readAsDataURL(file);
                });

                upload.uploadS3(dataURItoBlob(base64String), uploadURL2)
                .done((res)=>{
                    $("#upload-processing").hide();
                    $("#img-res").attr('src', base64String);
                    $('#editor-image').show();
                    $('#input-data').val(res.filename);
                    document.getElementById("btn-generate").disabled = true;
                    $('html, body').animate({
                        scrollTop: $("#editor-image").offset().top
                    }, 1500);
                    document.getElementById("fileInput").disabled = false;
                    generateFile = file;
                })
                .fail(function(xhr, status, error) {
                    let response = xhr.responseJSON || {};
                    document.getElementById("fileInput").disabled = false;
                    $("#upload-processing").hide();
                    alert(response.message);
                });

            } catch (e) {
                console.log(e)
                return false;
            } finally {

            }


        });

        $("#form-generate-photo").submit(async function(event){
            if (isExceedUsageLimit()) {
				displayUsageLimitError();
				return false;
            }
            document.getElementById("btn-generate").disabled = true;
            $("#mix_processing .alert").hide();
            event.preventDefault(); //prevent default action
            let formData = $(this).serializeArray();
            if (generateFile) {
                let generateParameters = {...objectifyForm(formData), reuse};
                processingBarInterval("#mix_processing");
                // let url = generateParameters.size == "1"? generateURL: generateFastURL;
                // let currentSize = $("#img-generate").get(0).naturalWidth;
                // if (currentSize == 1024) {
                //     currentSize = "1"
                // } else if (currentSize == 256){
                //     currentSize = "0"
                // }
                // if(currentSize != generateParameters.size){
                //     reuse = 0
                // }
                await generateResult(generateURL, generateParameters);
            }
        });
    });

    const processingBarInterval = (e) => {
        $(e).show();
        var currentPercent = 0;
        var percentPerSecond = 1;
        processInterval = setInterval(function(){
            if(currentPercent > 99){

            }else {
                currentPercent = currentPercent+0.05;
            }

            $(e+" .processing-bar").css('width',currentPercent+'%').attr('aria-valuenow',currentPercent);
            $(e+" .processing-percent").html(parseInt(currentPercent));
        }, 100)};

    const validateParameters = async () => {
        let checker = false;
        let formArray = $("#form-generate-photo").serializeArray();
        for await (input of formArray) {
          if (checker === false && input['value'].length <= 0) {
              checker = true;
          }
          continue;
        }
        return checker;
    }

    //serialize data function
    const objectifyForm = (formArray) => {
        var returnArray = {};
        for (var i = 0; i < formArray.length; i++){
            returnArray[formArray[i]['name']] = formArray[i]['value'];
        }
        return returnArray;
    }

    const generateResult = async (url, generateParameters) => {
        $('html, body').animate({
            scrollTop: $("#mix_processing").offset().top - 100
        }, 1000);

        if (reuse === 1) {
            generateParameters.data = $("#img-generate").attr('key');
        }
        $("#img-generate").attr('src', '');
        return await jQuery.ajax ({
            url,
            type: "POST",
            data: JSON.stringify({reuse, ...generateParameters}),
            processData: false,
            contentType: "application/json; charset=utf-8",
            cache: false,
            timeout: 600000,
            tryCount : 0,
            retryLimit : 10,
            success :  function(res) {
                reuse = 1;
                setTimeUpscale();
                $("#img-generate").attr('src', res.url + '?t=' + Date.now());
                $("#img-generate").attr('key', res.key);
                $("#btn-download").attr('href', res.url);
                $("#btn-editor-ac").attr('href', $("#btn-editor-ac").attr('data-href') + "?url=" + res.url);
                $("#mix_processing").hide();
                $("#result-container").show();
                clearInterval(processInterval);
            },
            complete: function() {
                document.getElementById("btn-generate").disabled = false;
            },
            error : function(xhr, textStatus, errorThrown ) {
                this.tryCount++;
                if (this.tryCount <= this.retryLimit) {
                    //try again
                    $.ajax(this);
                    return;
                }
                resetForm();
                $('<div class="alert alert-danger alert-dismissible fade show" role="alert">\
                <strong>エラーが発生しました。お手数ですが、時間をおいて再度送信してください。</strong>\
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">\
                    <span aria-hidden="true">&times;</span>\
                </button>\
                </div>').insertBefore('#upload-box');
                $('html, body').animate({
                    scrollTop: $("#upload-box").offset().top - 100
                }, 1000);
            }
        });
    }

    const resetForm = () => {
        $(".alert").hide();
        document.getElementById("btn-generate").disabled = false;
        document.getElementById("fileInput").disabled = false;
        let fileInput=$("#fileInput")
        fileInput.replaceWith(fileInput.val('').clone(true));
        $("#form-generate-photo")[0].reset();
        $("#img-generate").attr('src', '');
        $('#editor-image').hide();
        $('#result-container').hide();
        $('#age-selected').html("年齢");
        $('#gender-selected').html("性別");
        $('#race-selected').html("人種");
        $('#size-selected').html("サイズ");

    };

    function dataURItoBlob(dataURI) {
        var binary = atob(dataURI.split(',')[1]);
        var array = [];
        for(var i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
        }
        return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
    }

    const generateError = function() {
        $("#mix_processing p.error").html("エラーが発生しました。お手数ですが、時間をおいて再度送信してください。")
        $("#mix_processing .rounded").hide();
        $("#mix_processing .alert").show();
    }

    function setTimeUpscale(){
        if (isUnlimited) return;
        var date = new Date();
        var limit_key = 'limit_upscale_' + date.getFullYear() + '-' + (date.getMonth()+1) + '-' +  date.getDate();
        var curgentime = parseInt(getTimeUpscale());
        var newTimeUpscale = curgentime+1;
        if(newTimeUpscale > limit_upscale_per_day) return false;
        var leftUpscaleTime = padFormat(limit_upscale_per_day - newTimeUpscale);
        $("#box-limit-upscale strong").html(leftUpscaleTime);

        setCookie(limit_key,newTimeUpscale);
    }

    function getTimeUpscale(){
        var date = new Date();
        var limit_key = 'limit_upscale_' + date.getFullYear() + '-' + (date.getMonth()+1) + '-' +  date.getDate();
        var gentime = getCookie(limit_key);
        return gentime == null ? 0 : gentime;
    }

    function padFormat(d) {
        return (d < 10) ? '0' + d.toString() : d.toString();
    }

    function setCookie(key, value) {
        var expires = new Date();
        expires.setTime(expires.getTime() + (24 * 60 * 60 * 1000));
        document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
    }

    function getCookie(key) {
        var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
        return keyValue ? keyValue[2] : null;
    }
    function thisFileUpload() {
        document.getElementById("content_file").click();
    }

    function isExceedUsageLimit() {
        // Check usage limit
        if (isUnlimited) return false;

        var upscaletime = getTimeUpscale();
        return upscaletime >= limit_upscale_per_day;
    }
    function displayUsageLimitError() {
        var message;
        if (!isLoggedIn) {
            message = '無料会員登録すると1日に5回利用が可能です!すでに会員の方は<a target="_blank" href="https://accounts.ac-illust.com/login?serviceURL=https://kaoac.com/login">こちら</a>';
        } else {
            if (!isUnlimited) {
                message = '6回以上のご利用は、日本最大級の素材サイト<a target="_blank" href="https://www.ac-illust.com/">「イラストAC」</a><a target="_blank" href="https://www.photo-ac.com/">「写真AC」</a>のプレミアム会員様限定です。<br/>プレミアム会員登録は<a target="_blank" href="https://premium.photo-ac.com/premium/campaign?target=premium_sozai">こちら</a>';
            }
        }
        Swal.fire({
            icon: 'info',
            html: message,
            width: 'auto',
            confirmButtonText: !isLoggedIn ? '<a target="_blank" style="color: white;" href="https://accounts.ac-illust.com/signup?serviceURL=https://kaoac.com/login">無料会員登録</a>' : 'OK'
        });
    }

</script>

	</main>

	<footer id="footer" class="footer bg-black text-white p-4 font-size-14 position-relative">
	<div class="container footer-top text-center">
		<div class="py-5">
			<img src="https://kaoac.com/assets/frontend/images/kaoAC_white.png" alt="kaoAC" width="150" class="mx-auto d-block">
		</div>
		<div class="pb-5">
			<ul class="d-inline-flex list-unstyled">
				<li class="p-2"><a style="color: #949494;" href="terms">利用規約</a></li>
				<li class="p-2"><a style="color: #949494;" href="policy">プライバシーポリシー</a></li>
				
				<li class="p-2"><a style="color: #949494;" href="https://acworks.co.jp/" target="_blank">運営会社</a></li>
			</ul>
		</div>
		<div class="pb-5">
			<div class="social-links">
				<a class="btn" style="background-color:#4d4d4d;color:#b9b9b9;" href="https://help.freebie-ac.jp/" target="_blank">
					<i class="fa fa-commenting-o"></i>
					<small>ACヘルプセンター</small>
				</a>
				<!-- Modal -->
				<div class="modal fade" id="modalFeedbackForm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title " style="color:#4d4d4d;" id="exampleModalLabel">サイト改善にご協力ください</h5>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body">
								<form id="feedbackForm" method="POST" action="https://kaoac.com/feedback" novalidate>
									<div class="form-group rown-message">
										<input type="hidden" name="_token" value="v61Ypx9xWiHP5JXyMTnPCNvXaI0gsZf2IJ2DW3fh">										<textarea class="form-control" id="message" name="message" rows="5" placeholder="あなたのご意見をお聞かせください。個別返信はできかねますので予めご了承をお願い致します。" required></textarea>
										<div class="text-error form-text text-danger text-left"></div>
									</div>
									<div class="form-group row-captcha">
										<script src='https://www.google.com/recaptcha/api.js?onload=renderRecaptcha&render=explicit'></script>
<script>
var renderRecaptcha = function() {
    var captchaWidgetIds = [];
    $('.g-recaptcha').each(function(index, el) {
        var widgetId = grecaptcha.render(el, {'sitekey' :'6LeUZSUTAAAAAO0lPviBu3JbAQycXHAyaitMq9iW', 'callback' : $(el).data('callback')});
        $(el).data('recaptchaWidgetId', widgetId);
        captchaWidgetIds.push(widgetId);
    });
};
</script>
<div class="g-recaptcha"></div>										<div class="text-error form-text text-danger text-left"></div>
									</div>
									<div class="form-group">
										<button type="submit" class="btn btn-secondary">気づいたことを知らせる</button>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="sns-links d-flex align-items-center">
			<a href="https://www.facebook.com/ACworks2011/" target="_blank" class="facebook d-flex align-items-center justify-content-center rounded-circle text-decoration-none mr-2"><i class="fa fa-facebook"></i></a>
			<a href="https://twitter.com/ACworks2011" target="_blank" class="twitter d-flex align-items-center justify-content-center rounded-circle text-decoration-none">
				<svg class="svg-x-twitter" width="12" height="14" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"></path>
				</svg>
			</a>
		</div>
		<div class="text-center font-size-14 pb-5" style="color: #949494;">
		© 2020-2025 <a href="/" style="color: #949494;">顔AC</a>
		</div>
	</div>
</footer>
	<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
</body>
</html>
