Commit 1161dd51 authored by Sylvain Coulange's avatar Sylvain Coulange

Mise à jour majeure du logiciel pour premier déploiement

parent 2c80a60a
from django.shortcuts import render
from django.http import JsonResponse
import re, json, spacy
import re, json, spacy, subprocess
nlpFr = spacy.load('fr_core_news_lg')
nlpZh = spacy.load('zh_core_web_lg')
nlpFr = spacy.load('fr_core_news_md')
nlpZh = spacy.load('zh_core_web_md')
def home(request):
return render(request, 'coloriser.html')
updateTimeStr = updateTime()
return render(request, 'coloriser.html', {'updateTime': updateTimeStr})
def runSpacy(request):
colis = json.loads(request.body)
......@@ -46,3 +47,8 @@ def runSpacy(request):
'outText': outText
}
return JsonResponse(rep)
def updateTime():
upd = str(subprocess.check_output(["git", "log", "-1", "--format=%cd", "--date=short"]))
#ver = str(subprocess.check_output(["git", "rev-list", "--all", "--count"]))
return 'Version 2.0 (mise à jour le '+upd[2:-3]+')'
\ No newline at end of file
......@@ -61,28 +61,28 @@ async function runSpacy() {
// déterminants prépositionnels (du des...)
else if (data.outText[i].tag.slice(0,7)== "ADP_DET") {
result = result
+ '<span style="color:'+ pos["DET"].color +';'
+ '<span class="token" style="color:'+ pos["DET"].color +';'
+ stylesCommuns
+ stylesUnderline + 'text-decoration-color:' + pos["ADP"].color
+'" title="'+ data.outText[i].pos + ', ' + data.outText[i].tag
+'" title-data="'+ data.outText[i].pos + ', ' + data.outText[i].tag
+'">'+ data.outText[i].text + '</span>';
}
// pronoms adverbiaux (en et y)
else if (data.outText[i].text.toLowerCase() == "en" || data.outText[i].text.toLowerCase() == "y" && data.outText[i].pos == "PRON") {
result = result
+ '<span style="color:'+ pos["PRON"].color +';'
+ '<span class="token" style="color:'+ pos["PRON"].color +';'
+ stylesCommuns
+ stylesUnderline + 'text-decoration-color:' + pos["ADV"].color
+'" title="'+ data.outText[i].pos + ', ' + data.outText[i].tag
+'" title-data="'+ data.outText[i].pos + ', ' + data.outText[i].tag
+'">'+ data.outText[i].text + '</span>';
}
// tout le reste
else result = result
+ '<span style="color:'+ col +';'
+ '<span class="token" style="color:'+ col +';'
+ stylesCommuns
+'" title="'+ data.outText[i].pos + ', ' + data.outText[i].tag
+'" title-data="'+ data.outText[i].pos + ', ' + data.outText[i].tag
+'">'+ data.outText[i].text + '</span>';
}
......@@ -95,6 +95,31 @@ function getExample() {
var lang = document.getElementById('choixLang').value;
var inText = document.getElementById('inText');
inText.value = textExamples[lang];
example = textExamples[lang][Math.floor(Math.random() * textExamples[lang].length)];
inText.value = example;
}
function erase(){
document.getElementById('inText').value = '';
}
var tags = false;
function switchTags(){
divBtnTags = document.getElementById('ti_btntags');
tokens = document.getElementsByClassName('token');
if (tags) { // Masque les étiquettes morphosyntaxiques
for (i=0; i<tokens.length; i++){
tokens[i].title = '';
}
divBtnTags.style.border = "1px solid transparent";
} else { // Affiche les étiquettes morphosyntaxiques
for (i=0; i<tokens.length; i++){
tokens[i].title = tokens[i].getAttribute('title-data');
}
divBtnTags.style.border = "1px solid green";
}
tags = !tags;
}
\ No newline at end of file
selectLang("fr");
function selectLang(lang){
console.log('SelectLang()',lang);
interface(lang);
}
interface("fr");
function interface(lang) {
console.log("Langue d'interface:",lang);
thisPageLang = lang;
var langspanList = document.getElementsByClassName("langspan");
var langtitleList = document.getElementsByClassName("langtitle");
for (i=0; i<langspanList.length; i++) {
span = langspanList[i];
span.innerHTML = langJson[span.id][lang];
};
for (i=0; i<langtitleList.length; i++) {
title = langtitleList[i];
title.title = langJson[title.id][lang];
};
}
\ No newline at end of file
var textExamples = {
"fr":"L'apprentissage consiste à acquérir ou à modifier une représentation d'un environnement de façon à permettre avec celui-ci des interactions ou des relations efficaces ou de plus en plus efficaces.",
"zh":"在古埃及,中国和所有其他的文明中都留下很多文字。\n在中世纪的末期,因为封建领主想占据法理上的优势,推动了对古代文本的研究。"
"fr": [
"L'apprentissage consiste à acquérir ou à modifier une représentation d'un environnement de façon à permettre avec celui-ci des interactions ou des relations efficaces ou de plus en plus efficaces.",
"Le dolmen de Pierre-Fade se dresse sur les flancs d'un coteau, plus précisément sur une rupture de pente, à 674 m d'altitude, au lieu-dit Les Brousses, sur la commune de Saint-Étienne-des-Champs (parcelle cadastrale AX n°131).\n En contrebas, coule la rivière du Sioulet, ce qui aurait pu être un facteur déterminant pour l'installation du monument. En effet de nombreux galets ont été retrouvés dans la structure du tumulus (galets en basalte) et dans la couche archéologique de la chambre (petits galets de quartz et de micaschiste).",
"La licorne est une figure héraldique imaginaire féminine qui, selon la tradition, ressemble au cheval, a des sabots fourchus de cervidé, une barbiche sous la gueule et parfois une queue de lion.\n On la trouve surtout dans les ornements extérieurs de l'écu.",
"Le Monde et des tiers selectionnés, notamment des partenaires publicitaires, utilisent des cookies ou des technologies similaires.\n Les cookies nous permettent d’accéder à, d’analyser et de stocker des informations telles que les caractéristiques de votre terminal ainsi que certaines données personnelles (par exemple : adresses IP, données de navigation, d’utilisation ou de géolocalisation, identifiants uniques).",
"La fête de leurs 18 ans se joue à la roulette russe. Né en avril ? Confinement, on oublie les réjouissances… Né en juillet ? Déconfinement, fiesta ! Fin octobre ? Couvre-feu, au lit avec les poules.\n Novembre ? Reconfinement, pas de bol… Pour qui est né en 2002, la célébration, tant attendue, de la majorité dans l’excitation et les effluves d’alcool tient du coup de chance.",
"Rarement pareille guerre de communication n’aura animé une campagne précédant une énième « votation » au sein de la Confédération helvétique.\n Banderoles orange des partisans sur les balcons des appartements, pleines pages de publicité des opposants dans les grands quotidiens de Zurich et Genève, saturation des réseaux sociaux, et spam massif des messageries électroniques : dimanche 29 novembre, les citoyens suisses devront dire s’ils acceptent une « initiative pour des multinationales responsables », soutenue par la gauche et combattue par le patronat et les principaux partis de droite, à l’exception du PDC (démocrate-chrétien), divisé sur la question.",
],
"zh": [
"在古埃及,中国和所有其他的文明中都留下很多文字。\n在中世纪的末期,因为封建领主想占据法理上的优势,推动了对古代文本的研究。",
"日本自第三十六代孝德天皇即位並建元大化起開始使用年号為其纪年方式,並在文武天皇於701年5月3日(大寶元年三月二十一日)再度恢復使用年號後,一直持續使用年號至今。\n光嚴天皇為日本南北朝時代中由持明院統系擔任天皇的北朝的首任天皇,受镰仓幕府擁立。他在1332年5月23日(元弘二年四月二十八日)改元正慶,是為北朝年號之始,惟光嚴天皇在1333年7月7日(正慶二年/元弘三年五月二十五日)被後醍醐天皇廢位。光嚴天皇之弟光明天皇在後醍醐天皇的建武新政失敗後受足利氏擁立繼位為北朝天皇,並在1338年10月11日(建武五年/延元三年八月二十八日)改元曆應。",
"紫阳书院,是清代位于苏州的一所著名书院,“紫阳”的名字出自著名理学家的朱熹的表字。\n当时,官办学校一律以科举考试为教学内容,而紫阳书院坚持主要讲授朱熹理学,辅以有关科举考试的内容。张伯行还聘请崇明县教谕郭正宗、吴江县教谕夏声等人任教,一时汇集江南甚至全国各地的学生。",
"特色内容是维基百科社群推荐的典范之作。展示在这里的条目、列表及图片,都是参与者在维基百科的精神感召之下共同协作努力的成果。"
]
}
\ No newline at end of file
var langJson = {
"ti_titre": {
"fr":"GrammaChrome - Cliquez ici pour en savoir plus !",
"zh":""
},
"sp_header": {
"fr":"Cette application est un prototype en cours de conception. <a href='https://groups.google.com/d/forum/alem-app' target='_blank'><b>Accéder au forum</b></a> pour échanger avec la communauté et faire vos suggestions.",
"zh":"该应用是目前正在开发的原型。 <a href='https://groups.google.com/d/forum/alem-app' target='_blank'><b>进入论坛与社区</b></a>交流,提出您的建议。"
},
"sp_footcode": {
"fr":"Code source",
"zh":"Source code"
},
"sp_footjournal": {
"fr":"Journal des modifications",
"zh":"Modifications log"
},
"sp_footlicence": {
"fr":"Code open source sous licence CC BY-NC-SA 4.0",
"zh":"Open source code under CC BY-NC-SA 4.0 licence"
},
"sp_footSpaCy": {
"fr": "Analyse morphosyntaxique :",
"zh": "句法分析: "
},
"sp_subtitle": {
"fr": "<span style='color:#00b54a'>Coloriseur</span> <span style='color:#980086'>grammatical</span> <span style='color:#fff'>et</span> <span style='color:#980086'>automatique</span> <span style='color:#c00018'>de</span> <span style='color:#00b54a'>texte</span>",
"zh": ""
},
"sp_consigne": {
"fr": "Entrez du texte à analyser :",
"zh": "情插入一些案文:"
},
"sp_exemple": {
"fr": "Générer un exemple",
"zh": "提出一個例子"
},
"sp_resultat": {
"fr": "Résultats :",
"zh": "成果"
},
"ti_btntags": {
"fr": "Afficher/masquer les catégories au survol de la souris",
"zh": "Afficher/masquer les catégories au survol de la souris"
},
"sp_analyser": {
"fr": "Analyser",
"zh": "分析"
},
"sp_effacer": {
"fr": "Effacer",
"zh": "抹去"
},
"sp_info": {
"fr": "La colorisation de GrammaChrome se base sur l'analyseur morphosyntaxique <a href='https://spacy.io/'>SpaCy</a>.<br> Le modèle de langue utilisé (<a href='https://github.com/explosion/spacy-models/releases//tag/fr_core_news_md-2.3.0'>fr_core_news_md-2.3.0</a>) est un réseau neuronal convolutif entraîné sur les corpus Sequoia et WikiNER. Le modèle de mandarin (<a href='https://github.com/explosion/spacy-models/releases//tag/zh_core_web_md-2.3.1'>zh_core_web_md_2.3.1</a>) est entraîné sur OntoNotes.",
"zh": "La colorisation de GrammaChrome se base sur l'analyseur morphosyntaxique <a href='https://spacy.io/'>SpaCy</a>.<br> Le modèle de langue utilisé (<a href='https://github.com/explosion/spacy-models/releases//tag/fr_core_news_md-2.3.0'>fr_core_news_md-2.3.0</a>) est un réseau neuronal convolutif entraîné sur les corpus Sequoia et WikiNER. Le modèle de mandarin (<a href='https://github.com/explosion/spacy-models/releases//tag/zh_core_web_md-2.3.1'>zh_core_web_md_2.3.1</a>) est entraîné sur OntoNotes."
}
}
\ No newline at end of file
{
"sp_consigne": {
"fr": "Entrez du texte à analyser :",
"zh": "情插入一些案文:"
},
"sp_exemple": {
"fr": "Générer un exemple",
"zh": "提出一個例子"
},
"sp_result": {
"fr": "Résultats :",
"zh": "成果"
},
"sp_analyser": {
"fr": "Analyser",
"zh": "分析"
}
}
\ No newline at end of file
body {
background-image: url(../im/arriereplan.gif);
font-family: Palatino, Times, Calibri;
font-size: 14pt;
padding: 0px;
text-align: center;
.preprod {
position: absolute;
top: 5px;
left: 5px;
font-size: 2em;
font-weight: bolder;
color: red;
border: 5px solid red;
}
.choixLang {
......@@ -13,20 +15,77 @@ body {
background-color: white;
}
/* .inText {
color: white;
background-color: black;
padding: 2px;
width: 90%;
height: 500px;
font-size: 2em;
body {
background-image: url(../im/arriereplan.gif);
background-color: rgba(255, 255, 255, 0.5);
font-family: Palatino, SimSun, Times, Calibri;
font-size: 14pt;
text-align: center;
padding: 0px;
}
h2 {
padding: 10px;
font-size: 1.5em;
font-weight: bold;
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid gray;
overflow: auto;
resize: both;
} */
margin: auto;
}
.contours {
-webkit-text-stroke-width: 0.7px;
-webkit-text-stroke-color: black;
}
.outputParam {
position: absolute;
right: 0px;
top: 0px;
padding: 15px;
}
.outputParam span {
cursor: pointer;
padding: 5px;
font-size: 1em;
}
.outputParam svg {
cursor: pointer;
padding: 10px;
width: 50px;
}
.divInfo {
margin: 10px 20px;
font-size: 1em;
font-style: italic;
}
footer {
margin-top: 20px;
font-style: italic;
font-size: 12pt;
}
.licence-div {
display: -ms-flexbox; /* IE10 */
display: flex;
flex-direction: row;
flex-wrap: nowrap; /* étale les items sur la largeur */
justify-content: center;
align-items: center; /* alignement vertical des items */
font-size: 12pt;
}
.licence-div div {
margin: 3px 5px;
}
.header {
font-size: 12pt;
font-style: italic;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
}
.inputDiv {
display: inline-table;
......@@ -43,7 +102,7 @@ body {
.inText {
width: 95%;
height: 80px;
height: 120px;
margin: 5px;
padding: 10px;
border: solid 1px gray;
......@@ -91,9 +150,12 @@ body {
margin: auto;
text-align: left;
font-size: 35pt;
font-family: Palatino, Times, Calibri;
}
.outputBold {
font-weight: bold;
}
.btntags {
border: 1px solid transparent;
}
\ No newline at end of file
......@@ -6,10 +6,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GrammaChrome</title>
<link rel="shortcut icon" type="image/png" href="{% static 'wikicolor.ico' %}"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'styles/styles.css'%}">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="{% static 'languages/languages.js' %}"></script>
</head>
<body>
<div class="header"><span id="sp_header" class="langspan"></span></div>
<!--<a href="https://alem.hypotheses.org/outils-alem-app/wikicolor" target="_blank"><img src="{% static 'im/logo_wikicolor6b.png'%}" width="40%" class="langtitle" id="ti_titre"></a>-->
<h1>GrammaChrome</h1>
<h2 id="subtitle"><span id="sp_subtitle" class="contours langspan"></span></h2>
<div class="choixLang">
<select id="choixLang" onchange="selectLang(this.value)" style="height: 35px;">
<option value="fr">Français</option>
......@@ -17,24 +24,41 @@
</select>
</div>
<h1>GrammaChrome (proto)</h1>
<div class="inputDiv">
<h2>Entrez du texte à analyser :</h2>
<h2><span id="sp_consigne" class="langspan"></span></h2>
<div class="param">
<button onclick="getExample()">Générer un exemple</button>
<button onclick="getExample()"><span id="sp_exemple" class="langspan"></span></button>
</div>
<textarea class="inText" id="inText"></textarea>
<button onclick="runSpacy()">Analyser</button>
<button onclick="runSpacy()"><span id="sp_analyser" class="langspan"></span></button>
<button onclick="erase()"><span id="sp_effacer" class="langspan"></span></button>
</div>
<div id="outputDiv" class="win-black outputMainDiv">
<h2>Résultats :</h2>
<h2><span id="sp_resultat" class="langspan"></span></h2>
<div class="outputParam">
<div class="btntags langtitle" id="ti_btntags" onclick="switchTags()">
<svg viewBox="0 0 16 16" class="bi bi-tag" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 2v4.586l7 7L13.586 9l-7-7H2zM1 2a1 1 0 0 1 1-1h4.586a1 1 0 0 1 .707.293l7 7a1 1 0 0 1 0 1.414l-4.586 4.586a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 1 6.586V2z"/>
<path fill-rule="evenodd" d="M4.5 5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm0 1a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
</svg>
</div>
</div>
<center><div id="loader" class="loader" style="display: none;"></div></center>
<div id="outText" class="outText outputBold"></div>
</div>
<div class="divInfo">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-info-circle-fill mr-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</svg>
<span id="sp_info" class="langspan"></span>
</div>
{% include 'footer.html' %}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script type="text/javascript" src="{% static 'js/interface_basic.js' %}"></script>
<script type="text/javascript" src="{% static 'js/colors.js' %}"></script>
<script type="text/javascript" src="{% static 'js/textExamples.js' %}"></script>
<script type="text/javascript" src="{% static 'js/coloriser.js' %}"></script>
......
{% load static %}
<footer>
<!--<div style="font-size: 20pt;"><a href="https://alem.hypotheses.org/category/tutoriels/tutoriels-wikicolor" target="_blank"><span id="sp_tuto" class="langspan"></span></a></div>-->
<div>S.Coulange, {{updateTime}} |
<a href="https://gricad-gitlab.univ-grenoble-alpes.fr/pedagogies-multimodales/grammacolor"><span id="sp_footcode" class="langspan"></span></a>
- <a href="https://gricad-gitlab.univ-grenoble-alpes.fr/pedagogies-multimodales/grammacolor/commits/master"><span id="sp_footjournal" class="langspan"></span></a>
</div>
<div class="licence-div">
<div><span id="sp_footlicence" class="langspan"></span></div>
<div><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" title="Attribution-NonCommercial-ShareAlike 4.0 International"><img height="30px" src="{% static 'im/cc-by-nc-sa.png' %}" title="Attribution-NonCommercial-ShareAlike 4.0 International" class="licence-element licence-img"/></a></div>
<div><span id="sp_footSpaCy" class="langspan"></span><a href="https://spacy.io/"> SpaCy</a></div>
</div>
</footer>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment