2025, Oct 31 12:32

ब्राउज़र में PyScript के साथ SMA: pandas ठीक करें, yfinance को सर्वर पर ले जाएँ

जानें क्यों ब्राउज़र में PyScript के साथ yfinance नहीं चलता और pandas को py-config से सही तरह लोड करें. SMA के लिए CORS सीमाएँ, Flask API और फ्रंटएंड वर्कफ़्लो का व्यावहारिक हल.

ब्राउज़र में PyScript के साथ pandas और yfinance चलाना: आपका SMA डेमो क्यों टूटता है और इसे कैसे ठीक करें

PyScript के जरिए सीधे ब्राउज़र में Simple Moving Average (SMA) कैलकुलेटर बनाना देखने में आसान लगता है: पेज से उपयोगकर्ता इनपुट लें, yfinance से बाजार डेटा लाएँ, pandas में रोलिंग मीन निकालें और परिणाम दिखाएँ। व्यवहार में, आप जल्दी ही pandas के लिए ImportError से टकराते हैं, और ब्राउज़र में yfinance के साथ तो और भी कड़ी रुकावट मिलती है। आइए समझें कि यह क्यों हो रहा है और कौन-सा आर्किटेक्चर वास्तव में काम करता है।

वह न्यूनतम उदाहरण जो फेल होता है

नीचे दिया गया स्निपेट मूल विचार को ही दर्शाता है: टिकर, तारीख सीमा और विंडो साइज के लिए HTML इनपुट; फिर एक PyScript ब्लॉक जो इन मानों को पढ़ता है और yfinance से कीमतें डाउनलोड करने के बाद pandas के साथ SMA निकालता है।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script type="module" src="https://pyscript.net/releases/2024.2.1/core.js"></script>
  <title>SMA Demo</title>
</head>
<body>
  <form>
    <label for="symField">Enter ticker symbol:</label>
    <input type="text" id="symField" />
    <br />
    <label for="fromDate">Enter start date:</label>
    <input type="datetime" id="fromDate" />
    <br />
    <label for="toDate">Enter end date:</label>
    <input type="datetime" id="toDate" />
    <br />
    <label for="spanDays">Enter number of trading days (window) for SMA:</label>
    <input type="number" id="spanDays" />
    <br />
    <button type="button" id="btnGo">Calculate SMA</button>
    <button type="button" id="btnReset">Refresh</button>
  </form>

  <py-script>
from pyodide import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
yfinance as yf

sym_el = Element('symField').element
start_el = Element('fromDate').element
stop_el = Element('toDate').element
frame = yf.download(sym_el, start=start_el, end=stop_el)
win_el = Element('spanDays').element
frame['Simple Moving Aberage'] = frame['Close'].rolling(window=win_el).mean()
print(frame)
  </py-script>
</body>
</html>

ब्राउज़र में, यह सेटअप कुछ इस तरह की त्रुटि दिखाता है:

ImportError: cannot import name 'pandas' from 'pyodide'

असल में क्या टूट रहा है और क्यों

यहाँ दो अलग चिंताएँ हैं। पहला, PyScript के लिए pandas का इम्पोर्ट गलत लिखा गया है। आप pandas को pyodide से इम्पोर्ट नहीं करते; उसे PyScript में पैकेज के रूप में घोषित करते हैं और फिर सामान्य तरीके से import करते हैं। यह हिस्सा आसानी से ठीक हो जाता है।

दूसरी बात संरचनात्मक है और ब्राउज़र में अपरिहार्य: yfinance, requests पर निर्भर करता है, और fetch-आधारित कोई विकल्प CORS में अटक जाता है। इसलिए yfinance को ब्राउज़र रनटाइम के अंदर सीधे चलाना संभव नहीं है। यानी pandas ठीक हो जाने के बाद भी, yfinance क्लाइंट-साइड पर इन सीमाओं के कारण नहीं चलेगा। बताए गए परिदृश्य के लिए PyScript इसमें कोई अपवाद नहीं देता।

जो हिस्सा ब्राउज़र में ठीक हो सकता है: py-config के जरिए pandas

आप pandas को एक कॉन्फ़िगरेशन ब्लॉक में घोषित करके PyScript में उपलब्ध करा सकते हैं और फिर सामान्य तरीके से import कर सकते हैं। इसका एक कारगर पैटर्न नीचे है, और पूरा उदाहरण यह PyScript उदाहरण में मिल जाएगा।

<py-config>
    name = "Pandas"
    description = "A simple application that loads a csv and displays a table of its contents."
    packages = ["pandas"]
</py-config>
<py-script>
import pandas as pd
# यहाँ अपना pandas-आधारित लॉजिक जोड़ें
</py-script>

इसे SMA पेज पर लागू करते हुए, ब्राउज़र-साइड को इस तरह ढाला जा सकता है कि pandas सही तरह से लोड हो, जबकि आगे के एकीकरण के लिए मूल लॉजिक सुरक्षित रहे। ध्यान दें, यहाँ yfinance संदर्भ के लिए मौजूद है, पर ब्राउज़र में यह सफलतापूर्वक नहीं चलेगा।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script type="module" src="https://pyscript.net/releases/2024.2.1/core.js"></script>
  <title>SMA Demo (Fixed pandas import)</title>
</head>
<body>
  <py-config>
    name = "Pandas"
    description = "Enable pandas in PyScript"
    packages = ["pandas"]
  </py-config>

  <form>
    <label for="symField">Enter ticker symbol:</label>
    <input type="text" id="symField" />
    <br />
    <label for="fromDate">Enter start date:</label>
    <input type="datetime" id="fromDate" />
    <br />
    <label for="toDate">Enter end date:</label>
    <input type="datetime" id="toDate" />
    <br />
    <label for="spanDays">Enter number of trading days (window) for SMA:</label>
    <input type="number" id="spanDays" />
    <br />
    <button type="button" id="btnGo">Calculate SMA</button>
    <button type="button" id="btnReset">Refresh</button>
  </form>

  <py-script>
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import yfinance as yf

sym_el = Element('symField').element
start_el = Element('fromDate').element
stop_el = Element('toDate').element
frame = yf.download(sym_el, start=start_el, end=stop_el)
win_el = Element('spanDays').element
frame['Simple Moving Aberage'] = frame['Close'].rolling(window=win_el).mean()
print(frame)
  </py-script>
</body>
</html>

जो हिस्सा ब्राउज़र में संभव नहीं: yfinance

requests पर yfinance की निर्भरता इसे ब्राउज़र रनटाइम में चलने से रोकती है, और fetch-आधारित विकल्प CORS की वजह से रुक जाता है। इसलिए बाजार डेटा निकालना क्लाइंट से बाहर होना चाहिए। व्यावहारिक तरीका है कि सर्वर पर Flask जैसे छोटे वेब फ्रेमवर्क से डेटा प्राप्त करें, फिर परिणामों को फ्रंटएंड में प्रोसेस/दिखाएँ। इस सेटअप में आप yfinance को सर्वर पर बेझिझक इस्तेमाल कर सकते हैं, क्योंकि वहाँ ब्राउज़र वाली पाबंदियाँ नहीं होतीं।

आर्किटेक्चर और टूलिंग के लिए इसका महत्व

निष्कर्ष सिर्फ pandas का उपाय नहीं, बल्कि PyScript की सीमा भी है। जिन पैकेजों की नेटवर्किंग स्टैक ब्राउज़र के अनुकूल नहीं, वे क्लाइंट-साइड पर नहीं चलेंगे, और उन्हीं एंडपॉइंट्स पर सीधे fetch के प्रयास CORS में अटकेंगे। इन सीमाओं को पहले समझ लेने से साफ बँटवारा संभव होता है: डेटा फेच और कंप्यूट सर्वर पर; इंटरएक्टिविटी और रेंडरिंग ब्राउज़र में। संगत पैकेजों के साथ इन-ब्राउज़र Python के लिए PyScript उपयोगी है, पर यह सर्वर-साइड कार्यों का सर्वव्यापी विकल्प नहीं है।

निष्कर्ष

PyScript में pandas को py-config ब्लॉक के जरिए सक्षम करें और सामान्य import का उपयोग करें—यह हिस्सा आधिकारिक उदाहरण में दिखे अनुसार काम करता है। yfinance को ब्राउज़र में चलाने की कोशिश न करें; इसके बजाय, बाजार डेटा प्राप्ति को किसी हल्के वेब फ्रेमवर्क वाले सर्वर एंडपॉइंट पर ले जाएँ, और परिणाम फ्रंटएंड तक भेजकर विज़ुअलाइज़ करें। यह विभाजन ब्राउज़र की सुरक्षा सीमाओं का सम्मान करता है और आपके SMA कार्यप्रवाह को विश्वसनीय और संभालने में आसान बनाता है।

यह लेख StackOverflow पर प्रश्न (लेखक: rashmip_21) और Detlef के उत्तर पर आधारित है।

dataframe html pyscript python visualization