Running a Python script on HTML Button Click

Using Django Forms & APIs
1

Hello.
I am fairly new to Django. Basically, I have a python script which translates text from a language to English. The file containing the text will be .csv or .tsv and user can upload that file for which I have a form.
Now when the user uploads the file and presses the “Translate” button, I want Python (not JavaScript/JQuery/AJAX template) to handle it.
Now I am aware of views and rendering and redirecting etc. But basically I’m not aware of options to connect a Python script/view with an HTML button click.

The folder structure for the project is as under:

folderstructure
folderstructure252×507 8.05 KB

The translate.py contains the module responsible for translating the text/data. I call the concerned function in a view but I don’t know how I can trigger the view once the user will click the HTML button (whose type is “submit”).

Also, I would like that once the file has been uploaded and translate button has been pressed, some spinner or progress bar is displayed whose width (or percentage) values are updated continuously depending upon how much the file has been translated.
Lastly, I want that translated file to be available for the user to download.

The HTML right now is:

<<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Translate data to English</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    </head>

    <body>
        <div class="col-md-6 offset-md-3 mt-5">
             <form accept-charset="UTF-8" method="POST" enctype="multipart/form-data" target="_blank">
                {% csrf_token %} 
                <div class="form-group">
                 <label for="exampleInputName">Full Name</label>
                 <input type="text" name="fullname" class="form-control" id="exampleInputName" placeholder="Enter your name and surname" required="required">
               </div>
               <div class="form-group">
                 <label for="exampleInputEmail1" required="required">Email address</label>
                 <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
               </div>
               <div class="form-group">
                 <label for="exampleFormControlSelect1">Favourite Platform</label>
                 <select class="form-control" id="exampleFormControlSelect1" name="platform" required="required">
                   <option>CSV</option>
                   <option>TSV</option>
                 </select>
               </div>
               <hr>
               <div class="form-group mt-3">
                 <label class="mr-2"> <h6> Upload the file which you want to get translated: </h6> </label>
                 <input type="file" name="file">
               </div>
               <hr>
               <button type="submit" class="btn btn-primary">Translate</button>
             </form>
         </div>
    </body>
</html>
2

When a submit button is pressed, that causes a request to be sent to the server.

In the case of Django, the server is going to direct that request to a view.

That view can run whatever python code you want it to run. Yes, the tutorials and examples all show that in the context of only building the page to be returned, but you are not limited by what’s shown in those examples.

Also, virtually all the examples show the view returning an HttpResponse, but again, you’re not limited to that. Your view could return a FileResponse.

This is going to require some JavaScript to be used for this, along with some “coordinating communication” with the server. This may end up needing to get something like websockets involved.

There are two basic possibilities here:

  • The translation is going to happen quickly enough that the progress bar is superfluous.
  • The translation takes long enough that keeping the connection open is an issue.

With the first case, I’d strongly discourage attempting the progress bar at all.

In the second case, I wouldn’t tie up the user’s session by making them sit and wait for the task to complete. I’d spawn off the translation task to something like Celery and let it complete in the background. You can then provide for a “message” or a “notification” to be sent to the user to let them know that the task has finished.

You also want to consider how you’re going to store and manage these files.

  • How long are you going to keep them?
  • How long should they be available for download?
  • Do you want to store them as files, or store them as data within the database?