基于python和streamlit實現的Altshuller矛盾矩陣查詢
import streamlit as st
import json# 加載數據
@st.cache_resource
def load_data():with open('parameter.json', encoding='utf-8') as f:parameters = json.load(f)with open('way.json', encoding='utf-8') as f:contradictions = json.load(f)with open('function.json', encoding='utf-8') as f:functions = json.load(f)return parameters, contradictions, functions# 自定義CSS樣式
def inject_css():st.markdown("""<style>.card {background: #fff;border-radius: 10px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);padding: 12px;margin: 10px 0;}.title {font-size: 16px;color: #000000;border-bottom: 1px solid #e8eaec;padding-bottom: 8px;margin-bottom: 8px;}.content {font-size: 14px;color: #515a6e;}</style>""", unsafe_allow_html=True)def main():st.set_page_config(page_title="矛盾矩陣查詢", layout="wide")inject_css()st.title("Altshuller矛盾矩陣查詢")# 加載數據parameters, contradictions, functions = load_data()# 創建下拉選擇框col1, col2 = st.columns(2)with col1:better_options = {p["key"]: f'{p["key"]}.{p["parameter"]}' for p in parameters}better_param = st.selectbox("改善參數",options=[""] + list(better_options.keys()),format_func=lambda x: "選擇改善參數" if x == "" else better_options.get(x, x))with col2:worsen_options = {p["key"]: f'{p["key"]}.{p["parameter"]}' for p in parameters}worsen_param = st.selectbox("惡化參數",options=[""] + list(worsen_options.keys()),format_func=lambda x: "選擇惡化參數" if x == "" else worsen_options.get(x, x))# 查詢按鈕if st.button("查詢"):if not better_param or not worsen_param:st.warning("請選擇改善參數和惡化參數")return# 查找矛盾contradiction = next((c for c in contradictions if c["worsen"] == worsen_param and c["better"] == better_param),None)if not contradiction:st.error("沒有找到對應的矛盾信息")returnway = contradiction["way"]# 處理不同情況if way == "+":st.warning("產生的矛盾是物理矛盾")elif way == "-":st.info("沒有找到合適的發明原理來解決問題,當然只是表示研究的局限,并不代表不能夠應用發明原理。")elif way == "":st.info("沒有找到發明原理。")else:# 顯示發明原理function_keys = way.split(",")results = []for key in function_keys:func = next((f for f in functions if f["key"] == key), None)if func:html = f"""<div class="card"><div class="title">{func['key']}.{func['way']}原理</div><div class="content"><p>內容:{func['describe']}</p><p>例子:{func['examples']}</p></div></div>"""results.append(html)if results:st.markdown("".join(results), unsafe_allow_html=True)else:st.info("未找到對應的發明原理詳細信息")if __name__ == "__main__":main()
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache,must-revalidate"><meta http-equiv="Cache" content="no-cache"><title>矛盾矩陣查詢</title>
</head>
<style>.card {background: #fff;border-radius: 10px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);padding-bottom: 12px;margin-top: 16px;}#searchForm {padding-top: 16px;background: #fff;border-radius: 10px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);padding-bottom: 12px;margin-top: 16px;padding-left: 16px;padding-right: 16px;}.header {text-align: center;font-size: 20px;}select {display: inline-block;right: 0;margin-top: 2px;width: 100%;height: 30px;border-radius: 5px;}button {border: none;outline: none;display: inline-block;margin-top: 16px;width: 100%;border-radius: 5px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);height: 30px;background: #1890ff;color: #fff;}.card>p {padding-left: 16px;padding-right: 16px;color: #515a6e;font-size: 12px;}.title {border-bottom: 1px solid #e8eaec;padding: 14px 16px;line-height: 1;color: #000000;font-size: 15px;}.result {width: 95vw;margin: 2vw auto;}.result>div {margin-top: 2vw;}body {height: 100%;margin: 2vw;padding: 0;background-color: #f0f2f5;font-size: 15px;}
</style><body><div class="header">Altshuller矛盾矩陣查詢</div><form id="searchForm"><label for="betterParam">改善參數:</label><select id="betterParam"><option value="">選擇改善參數</option></select><br><label for="worsenParam">惡化參數:</label><select id="worsenParam"><option value="">選擇惡化參數</option></select><br><button type="submit">查詢</button></form><div id="result"></div><script>// 獲取參數數據fetch('parameter.json').then(response => response.json()).then(parameters => {// 動態生成惡化參數選項const worsenParamSelect = document.getElementById('worsenParam');parameters.forEach(param => {const option = document.createElement('option');option.value = param.key;option.textContent = param.key + "." + param.parameter;worsenParamSelect.appendChild(option);});});// 獲取發明原理數據fetch('parameter.json').then(response => response.json()).then(parameters => {// 動態生成改善參數選項const betterParamSelect = document.getElementById('betterParam');parameters.forEach(param => {const option = document.createElement('option');option.value = param.key;option.textContent = param.key + "." + param.parameter;betterParamSelect.appendChild(option);});});// 處理查詢請求document.getElementById('searchForm').addEventListener('submit', function (e) {e.preventDefault(); // 阻止表單提交const worsenParamKey = document.getElementById('worsenParam').value;const betterParamKey = document.getElementById('betterParam').value;// 發起查詢請求或執行其他操作console.log(worsenParamKey);console.log(betterParamKey);// 示例查詢handleSearchRequest(worsenParamKey, betterParamKey);});// 查詢請求處理函數function handleSearchRequest(worsenParamKey, betterParamKey) {return fetch('way.json').then(response => response.json()).then(contradictions => {return fetch('function.json').then(response => response.json()).then(functions => {const contradiction = contradictions.find(c => c.worsen === worsenParamKey && c.better === betterParamKey);if (contradiction) {console.log(contradiction.way)if (contradiction.way == "+") {alert("產生的矛盾是物理矛盾");return;}if (contradiction.way == "-") {alert("沒有找到合適的發明原理來解決問題,當然只是表示研究的局限,并不代表不能夠應用發明原理。");return;}if (contradiction.way == "") {alert("沒有找到發明原理。");return;}const functionKeys = contradiction.way.split(",");let result = "";functionKeys.forEach(functionKey => {const func = functions.find(f => f.key === functionKey);if (func) {result += `<div class="card"><div class="title">${func.key + '.' + func.way + '原理'}</div><p>內容:${func.describe}</p><p>例子:${func.examples}</p></div>`;}});document.getElementById('result').innerHTML = result;return;} else {alert("未選擇");return;}});});}</script></body></html>