Tianqiong ZhiXiang Forecast System with Django, Vue3, LSTM, TensorFlow, AI Agents

This is a front‑back separated system for weather query, prediction, announcements, and messaging, with an admin side handling data collection, model training, visualization, and operations. The focus is on building an asynchronous, observable, and extensible "collect‑store‑predict‑display‑Q&A" pipeline rather than merely stacking pages.

System Overview

The architecture is illustrated in the following diagrams:

Technology Stack

Frontend: Vue 3, TypeScript, Vite, Vue Router, Pinia – single‑page application, route permissions, state management, lazy loading.

Presentation: Element Plus, ECharts – forms, tables, trend charts, national map visualizations.

Backend: Django 4.2, Django REST Framework – function‑view APIs, authentication, business orchestration, unified responses.

Realtime & Async: Django Channels, Celery, Redis – WebSocket progress push, long‑task dispatch, task status and message broker.

Data Storage: MySQL 8, Redis 7 – weather and business data persistence, caching, channel layer, Celery broker/result store.

Intelligent Computing: TensorFlow, scikit‑learn, pandas – city‑level LSTM model training, normalization, seven‑day forecast.

Conversation: OpenAI‑compatible LLM (default DeepSeek) – tool‑intent recognition, natural‑language polishing of results, Server‑Sent Events output.

Project Structure and Reading Order

Data collection, tasks, progress: backend/api/crawler.py, backend/api/tasks.py, backend/api/consumers.py, backend/api/routing.py – read tasks first, then crawler and push logic.

LSTM prediction: backend/api/ml_models/weather_predictor.py, backend/api/prediction_service.py, backend/api/prediction_utils.py – start with service entry, then model and data preparation.

Agent & SSE: backend/api/agent_router.py, backend/api/agent_tools.py, backend/api/agent_llm.py, backend/api/views.py – configure whitelist, then routing and streaming views.

Big‑screen map: frontend/src/views/admin/BigScreenView.vue, frontend/src/components/bigscreen/ChinaMapPanel.vue, backend/api/geo_mapping.py – fetch API data first, then map interaction.

Batch analytics: backend/api/urls.py, backend/api/views.py, frontend/src/views/admin/AnalyticsView.vue – locate routes first, then view queries and displays.

Global configuration: backend/weather_system/settings.py, frontend/package.json – verify dependencies and environment variables.

Data Collection Process

The system scrapes weather data from weather.com.cn . City codes are centrally maintained. A full‑task iterates over cities with random intervals to reduce upstream load. Collected results are written to Forecast and WeatherData models. Tasks run in Celery workers; the management API returns 202 Accepted with a task_id, allowing the browser to continue without waiting for the entire collection to finish.

Documentation and Deployment

In addition to source code, the project provides detailed documentation and a deployment tutorial, illustrated by the following screenshots:

The documentation covers system architecture, code walkthroughs, and step‑by‑step deployment instructions, enabling developers to set up the platform locally or in production.