The modern software landscape is defined by the rapid expansion of component-based web technologies, where sophisticated frameworks like Angular, React, and Vue.js govern the creation of scalable Single-Page Applications (SPAs). However, subjective framework selection—often driven by developer preference rather than project requirements—leads to increased technical debt and high maintenance costs. This paper proposes a systematic, quantitative tool for architectural decision-making: the Weighted Decision Model (WDM). By formally defining eight critical architectural risk dimensions, including Complexity, Architectural Governance, Developer Velocity, Learning Curve, Ecosystem Depth, Runtime Performance, Maintainability, and Flexibility, the WDM merges fixed Framework Profile Scores (F_i) with organizational importance weights (W_i) to produce an objective, auditable recommendation score (S = Σ F_i × W_i). A proof-of-concept web application—Framework Recommender—implements the WDM as an interactive stakeholder dashboard, enabling real-time framework selection for projects of any scale. Furthermore, the integration of Explainable AI (XAI) techniques, specifically SHAP and LIME, ensures full transparency in the decision-making process. Experimental evaluation across seven project scenarios demonstrated that React achieves the highest WDM score (103 points) for startup and SPA-dominant use cases, while Angular excels (score: 81) in large regulated enterprise environments requiring strict Architectural Governance. The result is a proactive governance solution capable of early risk detection and long-term architectural stability, empowering technology leaders to align framework selection with organizational goals