Commit ada3d8cc authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

bascule vers AJAX pour coloriseur.html

parent cb14a31c
......@@ -7,59 +7,54 @@ import spacy
import subprocess
import re
nlp = spacy.load('fr')
nlpFr = spacy.load('fr')
#nlpEn = spacy.load('en')
logFile = "../logs/dico_frwiktionary-20200301_v2.log"
def redirApp(request):
return HttpResponseRedirect('/')
def main(request):
if request.POST.get('inText'):
text = request.POST['inText']
nlpText = nlp(text)
data = Data()
data.text = text
data.update = updateTime()
data.colorType = request.POST.get('colorType')
data.defaultBg = request.POST.get('defaultBg')
data.pphh = []
punctuation = [',','.'] # ')',']','}','%','>',"'",'(','[','{'
for token in nlpText:
sdl = re.findall(r'\r\n',token.text)
print("sdl =",sdl)
if len(sdl) > 0:
for s in sdl:
print("Saut de ligne.")
data.pphh.append('§')
elif token.text in punctuation:
data.pphh.append(token.text)
else:
print("Mot en entrée :",token.text)
result = txtphono.mimi(token.text)
print(result)
phonographieList = []
for r in result:
phonographie = []
for i in r:
ph = Phonograph()
ph.phon = i[0]
ph.graph = i[1]
phonographie.append(ph)
phonographieList.append(phonographie)
data.pphh.append(phonographieList)
else:
data = Data()
data.text = ''
data.pphh = [[[]]]
data.update = updateTime()
data.colorType = 'sw'
data.defaultBg = 'black'
data = Data()
data.update = updateTime()
return render(request, 'coloriseur.html', {'data': data})
def colorize(request):
colis = json.loads(request.body)
text = colis['inText']
lang = colis['lang']
nlpText = nlpFr(text)
outText = []
#punctuation = [',','.'] # ')',']','}','%','>',"'",'(','[','{'
for token in nlpText:
sdl = re.findall(r'\r\n',token.text)
print("sdl =",sdl)
if len(sdl) > 0:
for s in sdl:
print("Saut de ligne.")
outText.append('§')
else:
print("Mot en entrée :",token.text)
result = txtphono.mimi(token.text)
print(result)
phonographieList = []
for r in result:
phonographie = []
for i in r:
ph = {}
ph['phon'] = i[0]
ph['graph'] = i[1]
phonographie.append(ph)
phonographieList.append(phonographie)
outText.append(phonographieList)
rep = {
'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"]))
......@@ -130,11 +125,4 @@ def supprEntry(request):
def getLog(request):
rep = txtphono.sendMeLogPlease()
return JsonResponse(rep)
""" def commits(request):
data = commitData()
data.update = updateTime()
data.listCommits = subprocess.check_output(["git", "log", "--pretty=full"]).decode()
return render(request, 'commits.html', {'data': data}) """
\ No newline at end of file
return JsonResponse(rep)
\ No newline at end of file
......@@ -15,13 +15,14 @@ Including another URLconf
"""
from django.contrib import admin
from django.urls import path
from colorapp.views import main, dicoView, editEntry, newEntry, supprEntry, redirApp, main0, dicoReq, getLog
from colorapp.views import main, colorize, redirApp, dicoView, editEntry, newEntry, supprEntry, dicoReq, getLog
from django.views.decorators.csrf import csrf_exempt
urlpatterns = [
path('admin/', admin.site.urls),
path('app/', redirApp),
path('', main),
path('app/0', main0),
path('colorize/', csrf_exempt(colorize)),
path('app/dico/', dicoView),
path('dicoSearch/', dicoReq),
path('modifEntry/', editEntry),
......
$(document).ready(function(){
var txtarea = document.getElementById("inText");
txtarea.selectionEnd = txtarea.innerHTML.length;
txtarea.focus();
txtarea.focus();
});
var dicoTok = {};
var dicoId = {};
async function getColorisation() {
var inText = document.getElementById('inText').value;
var lang = document.getElementById('choixLang').value;
// ON EMBALLE TOUT ÇA
var colis = {
inText: inText,
lang: lang
}
console.log('Envoi colis:',colis);
// Paramètres d'envoi
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(colis)
};
// ENVOI
const response = await fetch('/colorize/', options)
console.log('En attente de réponse...');
const data = await response.json();
console.log(data);
// ÉCRITURE DU RÉSULTATS DANS DIV RÉSULTATS
var outputDiv = document.getElementById('output');
var outText = data['outText'];
outputDiv.innerHTML = "";
dicoTok = {};
dicoId = {};
for (i=0; i<outText.length; i++) {
// REMPLISSAGE DES ZONES MOTS DANS DIV RÉSULTATS
if (outText[i][0][0].graph.match(/\n+/)){
for (h=0; h<outText[i][0][0].graph.length; h++) {
outputDiv.innerHTML = outputDiv.innerHTML + '<br>';
}
} else if (outText[i][0][0].graph.match(/,|\.|\)|\]|\}|%|>/)) {
outputDiv.innerHTML = outputDiv.innerHTML + '<span class="phon_neutre">'+ outText[i][0][0].graph +'</span>';
} else {
outputDiv.innerHTML = outputDiv.innerHTML + '<span> </span><span class="tokens" id="tok'+ i +'" onclick="changeAlign(this.id)"></span>';
}
// FORMATAGE DES SPANS
if (outText[i][0][0].graph != '\n'){
dicoTok['tok'+i] = [];
for (j=0; j<outText[i].length; j++) {
var newWord = '';
for (k=0; k<outText[i][j].length; k++) {
console.log(outText[i][j][k]);
newWord = newWord + '<span class="phon '+ outText[i][j][k].phon +'">'+ outText[i][j][k].graph +'</span>';
}
dicoTok['tok'+i].push(newWord);
}
}
// INITIALISATION DU dicoId
if (outText[i][0][0].graph != '\n'){
dicoId['tok'+i] = 0;
}
}
var tokens = document.getElementsByClassName("tokens");
for (i = 0; i < tokens.length; i++) {
tokens[i].innerHTML = dicoTok[tokens[i].id][0];
if (dicoTok[tokens[i].id].length > 1) {
$('#'+tokens[i].id).addClass('transMult');
$('#'+tokens[i].id).prop('title', 'changer de prononciation');
};
};
unknownMark();
bugMark();
});
}
function delInText() {
document.getElementById('inText').value = "";
document.getElementById('output').innerHTML = "";
}
function unknownMark() {
var marks = document.getElementsByClassName('unknownMark');
......@@ -91,15 +173,7 @@ function bugMark() {
};
}
var tokens = document.getElementsByClassName("tokens");
var i;
for (i = 0; i < tokens.length; i++) {
tokens[i].innerHTML = dicoTok[tokens[i].id][0];
if (dicoTok[tokens[i].id].length > 1) {
$('#'+tokens[i].id).addClass('transMult');
$('#'+tokens[i].id).prop('title', 'changer de prononciation');
};
};
//réinitialise le bicolor (si bicolor)
if (document.getElementById('bicolor').checked == true) {
......@@ -143,10 +217,10 @@ function toBicolor() {
};
// Initialisation couleur background (par défaut black)
if (document.getElementById('defaultBg').value == 'white') {
document.getElementById('outputDiv').classList.toggle('win-white');
document.getElementById('output').classList.toggle('graphContours');
};
// if (document.getElementById('defaultBg').value == 'white') {
// document.getElementById('outputDiv').classList.toggle('win-white');
// document.getElementById('output').classList.toggle('graphContours');
// };
function bg2white() {
if (document.getElementById('defaultBg').value == 'black') {
......
This diff is collapsed.
......@@ -15,6 +15,13 @@ h2 {
-webkit-text-stroke-color: black;
}
.choixLang {
position: absolute;
top: 15px;
right: 15px;
background-color: white;
}
.inputDiv {
display: inline-table;
height: 100px;
......
......@@ -8,7 +8,7 @@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="{% static 'styles/keyboard-dark.css'%}" rel="stylesheet">
<link href="{% static 'styles/loading.css'%}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{% static 'styles/kinephones_style_v2.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/phonochromie_alem_v3.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/styles.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/popup.css'%}">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
......@@ -23,18 +23,22 @@
<span> </span><span class="phon_f">Ph</span><span class="phon_o_maj">o</span><span class="phon_n">n</span><span class="phon_o_maj">o</span><span class="phon_g">g</span><span class="phon_r_maj">r</span><span class="phon_a">a</span><span class="phon_f">ph</span><span class="phon_e">é</span><span class="phon_m">m</span><span class="phon_i">i</span><span class="phon_k">que</span>
</h2>
<div class="choixLang">
<select id="choixLang" onchange="selectLang(this.value)">
<option value="fr">Français</option>
<option value="en">English</option>
</select>
</div>
<div class="inputDiv">
<form action="/" method="post">{% csrf_token %}
<div class="param">
<input id="swcolor" type="radio" name="colorType" value="sw" {%if data.colorType == "sw" %}checked{% endif %}> <label for="swcolor">Silent Way</label><br/>
<input id="bicolor" type="radio" name="colorType" value="bi" {%if data.colorType == "bi" %}checked{% endif %}> <label for="bicolor">Bicolore</label>
<input type="hidden" id="defaultBg" name="defaultBg" value="{{ data.defaultBg }}"/>
</div>
<h2>Entrer du texte à coloriser :</h2>
<textarea name="inText" id="inText">{{ data.text }}</textarea><br/>
<input type="submit" value="Coloriser"/>
<button formaction="/app/0">Effacer</button>
</form>
<div class="param">
<input id="swcolor" type="radio" name="colorType" value="sw" checked> <label for="swcolor"><span style="-webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;"><span class="text phon_s">S</span><span style="background:-webkit-linear-gradient(white 60%, #e7236d 75%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;">i</span><span class="text phon_l">l</span><span class="text phon_e_maj ">e</span><span class="text phon_n">n</span><span class="text phon_t">t</span><span class="text punct "> </span><span class="text phon_w">W</span><span class="text phon_ei_maj">ay</span></span></label><br/>
<input id="bicolor" type="radio" name="colorType" value="bi"> <label for="bicolor"><span style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">B</span><span style="color: #40b9ff; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">i</span><span style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">c</span><span style="color: #40b9ff; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">o</span><span style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">l</span><span style="color: #40b9ff; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">o</span><span style="color: #ff0000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000;">re</span></label>
</div>
<h2>Entrer du texte à coloriser :</h2>
<textarea id="inText"></textarea><br/>
<button id="coloriser" onclick="getColorisation()">Coloriser</button>
<button id="delInText" onclick="delInText()">Effacer</button>
</div>
<div id="outputDiv" class="win-black outputMainDiv">
......@@ -43,15 +47,11 @@
<span class="glyphicon glyphicon-duplicate" aria-hidden="true" title="Copier/Coller le contenu" onclick="getPopUp()"></span>
</div>
<h2>Résultat :</h2>
<div id="output" class="output">
{% for token in data.pphh %}{% if token == "§" %}<br/>{% elif token in ",.)]}%>"|make_list %}<span class="phon_neutre">{{ token }}</span>{% else %}<span> </span><span class="tokens" id='tok{{ forloop.counter }}' onclick="changeAlign(this.id)"></span>{% endif %}{% endfor %}
</div>
<div id="output" class="output"></div>
</div>
<div>
<form method="POST">{% csrf_token %}
<button formaction="/app/dico/">Consulter/éditer le dictionnaire</button>
</form>
<a href="/app/dico/"><button>Consulter/éditer le dictionnaire</button></a>
</div>
<!-- Modal PopUp qui apparaît lors de l'enregistrement -->
......@@ -97,21 +97,21 @@
{% include 'footer.html' %}
<script type="text/javascript">
var dicoTok = {
{% for token in data.pphh %}
{% if token != "§" %}
'tok{{ forloop.counter }}' : [{% for trans in token %}'{% for entree in trans %}<span class="phon {{entree.phon}}">{{entree.graph}}</span>{% endfor %}',{% endfor %}],
{% endif %}
{% endfor %}
};
// var dicoTok = {
// {% for token in data.pphh %}
// {% if token != "§" %}
// 'tok{{ forloop.counter }}' : [{% for trans in token %}'{% for entree in trans %}<span class="phon {{entree.phon}}">{{entree.graph}}</span>{% endfor %}',{% endfor %}],
// {% endif %}
// {% endfor %}
// };
var dicoId = {
{% for token in data.pphh %}
{% if token != "§" %}
'tok{{ forloop.counter }}' : 0,
{% endif %}
{% endfor %}
};
// var dicoId = {
// {% for token in data.pphh %}
// {% if token != "§" %}
// 'tok{{ forloop.counter }}' : 0,
// {% endif %}
// {% endfor %}
// };
</script>
<script src="{% static 'scripts/main.js' %}"></script>
......
Supports Markdown
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