Question 197339 in Html Question posted in
Some basic documentation can be found here.

I it possible to integrate python with CSS, Javascript, and HTML?

I have a frontend web application built with JavaScript, HTML, and CSS. I would like to incorporate the output of a Python script into my frontend without using a server or a full backend solution.

The Python script is a simple neural network, and I want to display its output in the frontend, such as showing the result as a header or plotting a graph generated by the script.

I have already tried printing the output to the console from the Python script, but I need assistance with transferring that output to the frontend.

Is it possible to achieve this without a server? I am open to suggestions and starting with a simpler solution, like plotting a graph generated by the Python script in the frontend.

I appreciate any guidance or code examples on how to accomplish this. Thank you!
I have looked into Django but I feel as if that seems too complex and more server focused for the simple task I require.

Tags:

4

Answers


  1. 0

    looks like you are trying to make a web application with no backend.
    javascript is your only hope, if there is no backend.
    it is not possible to integrate python with CSS, Javascript, and HTML without a backend.

    Login or Signup to reply.
  2. 0

    Yes, it’s possible to incorporate the output of a Python script into your frontend without a server or a full backend solution. One way to achieve this is by using a tool like WebAssembly to run your Python script directly in the browser.WebAssembly is a low-level bytecode format that enables running code written in a variety of languages, including Python, directly in the browser. By using WebAssembly, you can compile your Python script into a format that can be executed in the browser without the need for a server.

    There are several ways to compile Python code to WebAssembly, such as using tools like Pyodide or PyO3. Once you have compiled your Python script to WebAssembly, you can then use JavaScript to load and execute the WebAssembly module in your frontend.

    Here’s an example of how you can use WebAssembly to plot a graph generated by a Python script in the frontend:

    1. First, you’ll need to compile your Python script to WebAssembly using a tool like Pyodide. You can follow the Pyodide documentation to learn how to do this.

    2. Once you have your WebAssembly module, you can load it in your frontend using JavaScript. Here’s an example of how you can load the module:

    // Load the WebAssembly module
const module = await WebAssembly.instantiateStreaming(fetch('path/to/module.wasm'));

// Get a reference to the Python script function
const pyFunction = module.instance.exports.py_function;

// Call the Python script function with arguments
const result = pyFunction(arg1, arg2, ...);
    1. Next, you can use a JavaScript plotting library like Plotly. js to plot the graph generated by the Python script. Here’s an example of how you can use Plotly. js to create a scatter plot:
    // Create a scatter plot
const plotData = [{
  x: [6, 2, 3, 1, 5],
  y: result,
  mode: 'markers',
  type: 'scatter'
}];

// Set the layout of the plot
const plotLayout = {
  title: 'Python Script Output'
};

// Render the plot
Plotly.newPlot('plot', plotData, plotLayout);

    In this code, i created a scatter plot with the x-axis values fixed to [6, 2, 3, 1, 5] and the y-axis values set to the output of the Python script. You should customize the plot data and layout to suit your needs.

    Note that this approach requires modern browser support for WebAssembly and may not be compatible with all browsers. Additionally, WebAssembly is a low-level format that requires some knowledge of binary code and memory management. If you’re not comfortable with these concepts, you may want to consider using a higher-level solution like a server or a full backend framework like Flask, Django or others…

    Login or Signup to reply.
  3. 0

    If you want to incorporate the output of a Python script into your frontend without using a server or a full backend solution, you have a few options available. One approach is to use a technique called "WebAssembly" (Wasm) to run the Python script directly in the browser.
    Emscripten: https://emscripten.org/
    Pyodide: https://github.com/pyodide/pyodide

    Login or Signup to reply.
  4. 0

    Looks like the same problem we solved by using the python package streamlit. Streamlit is a Python package that can be installed using pip install streamlit. You run your scripts from command line using streamlit run <python-scipt>.
    You can also deploy streamlit on a server to serve your python scripts e.g. within a company network.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search