Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 12, 2023 05:49 am GMT

We asked ChatGPT how to use our service. Here is what AI answered

Welcome to2023! Here wehave chatbots that can easily replace real humans!

OpenAI launched ChatGPT inNovember 2022. Weplayed with this bot, discovered some appealing applications, and forgot aboutit.

But then wethought: What ifweask ChatGPT tobuild afile uploader page using Uploadcare? Why not? Itshould beentertaining.

Instead ofproviding the context tothe bot atthe start, wedecided toplay arole ofajunior developer. Our developer heard something about frontend, HTML, CSS &JS, but they donot know much. This iswhy they ask alot ofnewbie questions. Tomake iteasier toread: our questions are headlines, and ChatGPTs answers are the normal text. Italic text isour comments onthe whole play.

Weused the bots answers asis. The only thing weremoved isthe ubiquitous reminders that the bot isready for any questions. The bot says itatthe end ofeach reply.

Lets get started, huh?

How tocreate asimple HTML webpage with afile input?

Here isasimple HTML webpage with afile input field that allows users toselect afile toupload:

<html>  <body>    <form>      <label for="file">Select a file:</label><br>      <input type="file" id="file" name="file"><br>      <input type="submit" value="Submit">    </form>  </body></html>

This HTML code creates aform with afile input field and asubmit button. When the user selects afile and clicks the submit button, the form will besubmitted and the selected file will beuploaded.

How toserve asimple HTML file onlocalhost tobeable toopen itinabrowser?

Toserve anHTML file onlocalhost, you will need touse aweb server. Here are the steps toserve anHTML file onlocalhost using asimple Python web server:

  1. Install Python: Make sure you have Python installed onyour computer. You can check ifPython isalready installed byopening aterminal and entering the command python --version. IfPython isnot installed, you can download and install itfrom the Python website.

  2. Start the web server: Open aterminal and navigate tothe directory that contains your HTMLfile. Then start the Python web server byentering the following command:

   python -m http.server 8000

This will start aweb server onyour local machine that listens onport 8000.

  1. View the HTML file inyour browser: Open aweb browser and enter the following URL:
   http://localhost:8000/your_html_file.html

Replace your_html_file.html with the name ofyour HTMLfile. This will open the HTML file inyour browser.

Well itworks for now:

Browser window where file submitting form is shown: label, file input and submit button

Give mecode that installs Uploadcare widget onmywebsite, please

We are trying tobepolite. Never know whenAI becomes Skynet!

Toinstall the Uploadcare widget onyour website, you will need toadd the following code toyour HTML:

<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js" charset="utf-8"></script>

This will include the Uploadcare widget library inyour website.

Once you have added this script toyour HTML, you can then use the widget toallow users toupload files from your website. Here isanexample ofhow you can dothis:

<!-- HTML for file input --><input type="hidden" role="uploadcare-uploader" name="my_file" /><!-- JavaScript to initialize the widget --><script>  UPLOADCARE_PUBLIC_KEY = 'your_public_key';  var widget = uploadcare.Widget('[role=uploadcare-uploader]');</script>

Inthis example, the input element with the uploadcare-uploader role serves asaplaceholder for the widget. The JavaScript code initializes the widget and specifies your Uploadcare public key, which you can find inyour account settings.

Again, itworks:

Browser window with modal popup of Uploadcare widget and its button behind the popup

We tested the widget, itworks properly. But this isanold way toinstall our uploader. Currently wehavea beta version ofFile Uploader, that isbasedon Uploadcare Blocks. Lets find out what the bot knows about it!

Isee ontheir website, that now they offer something called Blocks. How doI create afile uploader using these?

Uploadcare Blocks isanew way tobuild file uploaders and file handling workflows using pre-built UIcomponents. Itallows you toeasily add file uploading and file handling functionality toyour website orapplication with minimal code.

Tocreate afile uploading form using Uploadcare Blocks, you will need todothe following:

  1. Sign upfor anUploadcare account: Gotothe Uploadcare website and sign upfor anaccount. You will need toprovide your email address and create apassword.

  2. Install the Uploadcare Blocks library: Touse Uploadcare Blocks, you will need toinclude the Blocks library inyour HTMLcode. You can dothis byadding the following script tag toyour HTML:

   <script src="https://ucarecdn.com/libs/blocks/2.x/uploadcare.min.js" charset="utf-8"></script>
  1. Add afile input element toyour HTML: Tocreate afile uploading form using Uploadcare Blocks, you will need toadd afile input element toyour HTMLcode. You can dothis byusing the following HTML:
   <lr-file-uploader-regular name="my_file"></lr-file-uploader-regular>

This will create afile input element that will beused toselect and upload files.

  1. Initialize the Uploadcare Blocks library: Toinitialize the libaby set the Uploadcare public key when using the lr-file-uploader-regular element. You can use the --cfg-pubkey attribute asaCSS context property. For example:
   <style>     lr-file-uploader-regular {       --cfg-pubkey: "your_public_key";     }   </style>

Replace your_public_key with your actual Uploadcare public key, which you can find inyour account settings. This will set the public key for the file uploader and allow ittoconnect tothe Uploadcare API.

Ha! This time itdoes not work!

Browser window without file uploader and with an error in console saying that uploadcare.min.js can not be loaded due to 403 error

Lets ask the robot why!

The link you provide, that should install the library, isbroken

Iapologize for the broken link. The correct URL for the Uploadcare Blocks library ishttps://unpkg.com/@uploadcare/[email protected]/web/blocks-browser.min.js. You should use this URL toinclude the Blocks library inyour HTMLcode.

Toinclude the Blocks library inyour HTML, you will need toadd the following script tag toyour HTML:

<script src="https://unpkg.com/@uploadcare/[email protected]/web/blocks-browser.min.js" charset="utf-8"></script>

This will include the Blocks library inyour HTML, allowing you touse the Blocks library tobuild file uploaders and file handling workflows.

Well, mister smarty-pants, itlooks like youve forgot something:

Browser window with broken file uploader and a lot of errors in the console related to CSS

Thanks, now the script works, but itlooks like styles are not loaded. Heres whatI see inthe console: CSS Data error: --icon-upload. How tofix the styles?

Tofix the CSS errors that you are seeing inthe console, you will need toinclude the CSS styles for the Uploadcare Blocks library inyour HTML.

You can dothis byadding the following link element tothe head ofyour HTML:

<link href="https://unpkg.com/@uploadcare/[email protected]/web/file-uploader-regular.min.css" rel="stylesheet">

This will include the CSS styles for the Blocks library inyour HTML, and should fix the CSS errors that you are seeing inthe console.

Alternatively, you can use the css-src attribute onthe lr-file-uploader-regular element tospecify the URL ofthe CSS styles for the Blocks library. For example:

<lr-file-uploader-regular  name="my_file"  css-src="https://unpkg.com/@uploadcare/[email protected]/web/file-uploader-regular.min.css"></lr-file-uploader-regular>

It works!

Browser window with a button of the File Uploader beta

Weve managed toupload afile using the code the bot suggests:

Browser window with an uploaded file using the File Uploader beta

Alright. When Iuploaded animage toUploadcare, how doI inject ittothe webpage? Ialso want toresize itto256256px

Todisplay animage that you have uploaded toUploadcare inyour webpage, you will need touse an img element and set the src attribute tothe URL ofthe image onUploadcares servers.

For example:

<img src="https://ucarecdn.com/image_id/">

Replace image_id with the actualID ofthe image that you want todisplay. You can find theID ofthe image inthe response that the Blocks library returns when you upload the image.

Toresize the image toaspecific size, you can use the -/resize/ operation inthe URL ofthe image. For example, toresize the image to256256pixels, you can use the following URL:

<img src="https://ucarecdn.com/image_id/-/resize/256x256/">

This will display a256256 pixel version ofthe image. You can specify any size that you want bychanging the values inthe resize operation.

Easy-peasy:

Browser window with resized image showing

Now, lets sum upour experiment without italic.

Conclusion

Tobehonest, when westarted the experiment wedid not believe that ChatGPT could deal withit. Sure, its acool toy, and iteven knows how togenerate code examples related toyour problem. But weare surprised that the bot knows alot about our new features, recent documentation, and soon.

Itfeels like youre talking toanassistant who can google for you.

After the first rapture had passed, weasked ChatGPT more programming-related questions. Wewould say that itgenerates code that looks like itshould work. Ifyou donot know how tosolve the problem, the code you get can mislead you because itistoo convincing.

Besides, ChatGPT makes mistakes. Inthis article, weve encountered only one the broken link. But the more questions you ask, the more connected the bots answers are. Sometimes they become too connected and start toaffect each other. E.g. ChatGPT adapts replies tothe language orprogramming paradigm you prefer. This feature sometimes leads tobroken orunoptimized code.

Anyway, ChatGPT isstill ahandy tool touse. There are some use cases:

  1. Tocollect abroad overview ofsome topics. E.g. you may ask about scientific concepts ordiscoveries. When the bot answers, you may ask about relations toother concepts, key people inthe field, and soon. Its like reading those Wikipedia snippets inGoogle, but you can get such asnippet for any ofyour questions. Try: "Tell me, please, what Alan Turings most popular paper was about?"

  2. Tohandle interactive chats onyour website orapp (noway!). Ortohelp ahuman inacall center tofind ananswer inabunch ofdocumentation.

  3. Togenerate blocks ofboring text, like legal documents orofficial letters. Sure, alawyer should review the output, but the result isnot that bad already. Try: "Im creating anAndroid game that does not collect any data. Itisnot even connected tothe Internet. Doyou mind generating the privacy policy for the game?"

  4. Toextract SEO keywords from the provided text. But wewill see what Google thinks aboutit.

  5. Tosimplify the description ofacomplex thing tothe desired level. E.g. try tocopy-paste ascience term definition from Wikipedia and ask ChatGPT tosimplify itfor asecond-grade student.

  6. Tosolve puzzles together. Itcan solve crosswords with ease. Ifyou try hard, you can even explain the bot Wordle rules and get help with todays word!

Finally, ifyou have atech company, its interesting tosee whether the bot can use your service. The result ofsuch acheck may trigger you toimprove the docs ortoclarify the purpose ofyour product.

Give itatry, and, who knows, you may find ChatGPT aplace inyour toolset.

P.S. Bythe way, wegenerated anOpenGraph image and the image you see below via Midjourney, while ChatGPT helpedus towrite the text onthat images. Gosh, what atime tobealive!

Originally published by Igor Adamenko in Uploadcare Blog


Original Link: https://dev.to/uploadcare/we-asked-chatgpt-how-to-use-our-service-here-is-what-ai-answered-1jf2

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To