PHP Classes

File: index.html

Recommend this page to a friend!
  Classes of Chun-Sheng, Li   Web Extract Worker   index.html   Download  
File: index.html
Role: Auxiliary data
Content type: text/plain
Description: Example page
Class: Web Extract Worker
Output images from prompts with CloudFlare AI API
Author: By
Last change:
Date: 2 months ago
Size: 4,229 bytes
 

Contents

Class file image Download
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web Extract Worker</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <style> .container { width: auto; max-width: 680px; padding: 0 15px; } .footer { background-color: #f5f5f5; } .bd-placeholder-img { font-size: 1.125rem; text-anchor: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @media (min-width: 768px) { .bd-placeholder-img-lg { font-size: 3.5rem; } } </style> <script> $(function () { $("#image_result").hide(); $("#btn_generating").hide(); $("#btn_fetch").click(function (e) { $("#btn_generating").show(); $("#btn_fetch").hide(); e.preventDefault = false; let prompt = $("#txt_prompt").val(); let oThis = $(this); oThis.attr('disabled', true); $.get('https://web-extracter.peterli.website/extract.php?prompt=' + encodeURIComponent(prompt), function (data) { console.log(data); oThis.attr('disabled', false); let dataJson = JSON.parse(data); let response = dataJson['result']; let error = dataJson['error']; if (error) { alert('Error message: ' + error); return false; } $('#image_result').attr('src', `data:image/png;base64,${response}`); $("#image_result").show(); $("#btn_generating").hide(); $("#btn_fetch").show(); }); }); }); </script> </head> <body> <main role="main" class="flex-shrink-0"> <div class="container"> <h1 class="mt-5">Web Extract Worker</h1> <div class="row justify-content-left"> <div class="col-12 col-md-12 col-lg-12"> <form class="card card-sm"> <div class="card-body row no-gutters align-items-center"> <div class="col-auto"> <i class="fas fa-search h4 text-body"></i> </div> <!--end of col--> <div class="col"> <input id="txt_prompt" class="form-control form-control-lg" type="text" placeholder="Please paste prompt text"> </div> <!--end of col--> <div class="col-auto"> <button id="btn_fetch" class="btn btn-lg btn-success" type="button">Generate</button> <button id="btn_generating" class="btn btn-lg btn-success" disabled> <span class="spinner-border spinner-border-sm"></span> Generating.. </button> </div> <!--end of col--> </div> </form> </div> <!--end of col--> </div> <p> <div class="row justify-content-center"> <img id="image_result" src="" class="img-fluid img-rounded" alt="Image Result"> </div> </p> </div> </main> </body> </html>